I have an HTML5 input field that displays a clear button with an "x" in it in webkit browsers when the field has characters in it. The problem is that, when the field is filled with characters, these will run behind the x button until they reach the right side of the input before they are scrolled off of the left side of the input.
I want to define the width of the input area in which characters may appear. How is this done in the most cross-browser way possible? (I don't need the x buttons in all browsers, but I don't mind them when they do show up. I just need to define the area an input has available to visible characters so they start to scroll off to the left before they get behind the x buttons)