How to position an x in an input widget to clear the content?

Question

With twitter bootstrap it is quite straight forward to create a Search style input widget:

Also the x is doable with Twitter bootstrap, but positioning the x in that spot, requires some CSS finetuning.

I managed to get the x in that position, but it isn't very reliable. With a responsive-design and different resolutions the x gets completely displaced.

.filter-close {
    float: none;
    position: relative;
    left: 5em;
    top: 1.25em;
    z-index: 3;
}

<form action="." method="get" class="form-search">
 <a class="close filter-close" href="#">x</a>                                           
    <div class="input-append">                  
        {{filter_form.last_name}}<button type="submit" class="btn"><i class='icon-filter'> </i></button>                </div>                          
</form>

Before trying to reinvent the wheel, is there any existing javascript library that could turn an input in an input-with-an-x-button? Something like Chosen.js for this purpose? Or any advice how I could do this in a better way?

Many Thanks,

Answer 1

Check out this post

This fiddle basically does what you are looking to do.

You are headed in the right direction.