Controlling text overflow in html5 input field

Question

I have an HTML5 input field that displays a clear button with an "x" in the webkit browser when there are characters in the field. The problem is that when the field is filled with characters, they will work after the x button until they reach the right side of the input before they are scrolled on the left side of the input.

I want to determine the width of the input area in which characters can appear. How is this done in the cross browser itself? (I don’t need the x buttons in all browsers, but I don’t mind them when they appear. I just need to determine the area in which the input is accessible for visible characters, so they start to scroll left until they leave the x buttons)

Answer 1

Using the CSS property with the addition on the right

<input type="text" style="padding-right: 1em; width: 5em;"> 

Answer 2

Plain!

http://jsfiddle.net/neRWQ/1/

just “hide” the input and model it with a div. So, you have free space on the right where the user cannot write;)

<div class="input_container"><input type="TEXT" /></div>

 input { background-color: white; border: 0px; width: 180px; outline: 0px; } .input_container { width: 200px; border: 1px solid #000; } 

Answer 3

If you say search inputs (which are claimed by the only ones that have a small x displayed in WebKit browsers that I can think of), I would recommend deleting a custom style that causes more problems than anything else:

 input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }