Wie positioniere ich ein x in einem Eingabe-Widget, um den Inhalt zu löschen?

Question

Mit twitter Bootstrap es ziemlich geradlinig ist eine Suche Stil-Eingabe-Widgets zu erstellen:

Auch die x ist machbar mit Twitter Bootstrap, aber die Positionierung der x an dieser Stelle, erfordert einige CSS Feinabstimmung.

Ich schaffte es, das x in dieser Position zu bekommen, aber es ist nicht sehr zuverlässig. Mit einem responsiven Design und verschiedenen Auflösungen wird das x komplett verdrängt.

.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> 

Bevor Sie versuchen, das Rad neu zu erfinden, gibt es eine vorhandene JavaScript-Bibliothek, die eine Eingabe in einer Eingabe-mit-einem-x-Taste drehen könnte? So etwas wie Chosen.js für diesen Zweck? Oder einen Ratschlag, wie ich das besser machen könnte?

Vielen Dank,

Answer 1

Check out this post

This fiddle im Grunde tut, was Sie zu tun suchen.

Sie sind in die richtige Richtung geleitet.

Answer 2

Mit einigen Änderungen an einigen Bootstrap-Code und ein wenig JavaScript können Sie dies erreichen, in der Tat können Sie jede gewünschte Steuerung in das Textfeld einfügen. Hier ein Beispiel:

Und hier ist die endgültige Markup generieren:

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

Für den vollständigen Code Check out this post: http://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html

Answer 3

Grundsätzlich ist der Schlüssel Verwenden Sie Positionierung und left:-20px auf dem Clearing-Element.

Zum Beispiel:

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

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

diese Weise die Spanne wird die Eingabe auf der linken Seite davon überlappen. Sie können einen Ereignishandler anhängen, um das Eingabefeld zu löschen.