Make Text Input Scroll Before Reaching the End

Question

So here's what I already have: When a user starts typing into a text field, a "clear" button appears within the right side of the text field that resets the search. However, since the image appears within the text field, if you happen to type enough your text will start getting obscured by the image.

This raises two questions:

1. Is there a way to get the text field to begin scrolling either after the text reaches a certain number of pixels, or a certain number of characters (presumably to start scrolling before reaching the clear button)?
2. Am I going about this the wrong way? Is there a better way to achieve the desired effect? I mean I could leave the text as is, and just expect that nobody is going to really need to type that many characters, but I can't truly make that assumption, I don't want to force them into a text limit (because the searchable field can be quite large), and I'm a stickler for detail so this tiny little thing really irks me.

I have the following HTML:

<div id="container">
    <img class="clear-button" title="Clear search" src="/img/clear-button.png"
        onclick="clearSearch();">
    <label for="search-filter">Find Foo: </label>
    <input type="text" id="search-filter" />
    <input type="submit" id="search-filter-button" value="Search" />
</div>

And the following JavaScript (jQuery):

$('#search-filter').on('keypress', function(e) {
    if (e.which == 13) {
        $('#search-filter-button').click();
    }

    if ($(this).val().length != 0) {
        $('.search-clear-button').fadeIn(200);
    }
});

For the sake of completeness, this is what the text field looks like:

Answer 1

Try adding padding to the right of the input box and adjusting width accordingly.