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 pletely 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,

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 pletely 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,

• javascript
• jquery
• django
• twitter-bootstrap

• have you tried using pixels, rather than EMs? That might make its position more reliable – MrOBrian Commented Oct 3, 2012 at 21:47
• Thank you for the tip, I will try this and let you know. – Houman Commented Oct 3, 2012 at 22:03

3 Answers 3

Check out this post

This fiddle basically does what you are looking to do.

You are headed in the right direction.

With some changes to some of the bootstrap code and a little JavaScript you can acplish this, in fact you can place any control you want inside the textbox. Here is an example:

And here is the final markup used to generate it:

<div class="posite-input">
    <span class="focus-input">Filter:</span> 
    <input type="text" /> 
    <span>×</span>
</div>

For the full code check out this post: http://www.simplygoodcode./2013/08/placing-text-and-controls-inside-text.html

Basically the key is to use relative positioning and left:-20px on the clearing element.

For example:

<input type="text" /><span id="userclear">x</span>

span#userclear
{
  position: relative;
  left: -20px;
}

This way the span will overlap the input to the left of it. You can attach an event handler to it to clear the input field.