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:

enter image description here

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,

have you tried using pixels, rather than EMs? That might make its position more reliable — MrOBrian, Oct 03 '12 at 21:47

score 6 · Accepted Answer · edited May 23 '17 at 11:45

6

Check out this post

This fiddle basically does what you are looking to do.

You are headed in the right direction.

edited May 23 '17 at 11:45

Community

1
1

answered Oct 03 '12 at 22:27

karthikr

97,368
26
197
188

I streamlined @karthikr CSS a bit with a [revised fiddle](http://jsfiddle.net/Q7fRB/563/) . – Pete Oct 07 '15 at 15:44

score 1 · Answer 2 · answered Aug 21 '13 at 22:49

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

enter image description here

And here is the final markup used to generate it:

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

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

score 1 · Answer 3 · answered Nov 19 '13 at 04:38

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.

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

3 Answers3