Come posizionare una x in un widget di input per cancellare il contenuto?

Question

con Twitter bootstrap che è avanti abbastanza semplice per creare un widget di ricerca ingresso stile:

Anche l'x è fattibile con Twitter bootstrap, ma posizionando la x in quel punto, richiede una certa Regolazione manuale CSS.

Sono riuscito a ottenere la x in quella posizione, ma non è molto affidabile. Con un design reattivo e diverse risoluzioni la x viene completamente spostata.

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

Prima di cercare di reinventare la ruota, c'è qualche libreria javascript esistente che potrebbe trasformare un input in un ingresso-con-un-x-bottone? Qualcosa come Chosen.js per questo scopo? O qualche consiglio su come potrei farlo in un modo migliore?

Molte grazie,

Answer 1

Scopri this post

This fiddle fa sostanzialmente quello che stai cercando di fare.

Sei diretto nella giusta direzione.

Answer 2

Con alcune modifiche ad alcuni dei codici di bootstrap e un po 'di JavaScript è possibile eseguire questa operazione, infatti è possibile posizionare qualsiasi controllo desiderato all'interno della casella di testo. Ecco un esempio:

Ed ecco la marcatura finale utilizzato per generarlo:

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

Per il controllo completo codice di questo post: http://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html

Answer 3

Fondamentalmente la chiave è per utilizzare il posizionamento relative e left:-20px sull'elemento di compensazione.

Ad esempio:

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

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

questo modo la durata si sovrappongono l'ingresso a fianco di esso. È possibile associare un gestore di eventi ad esso per cancellare il campo di input.