¿Cómo colocar una x en un widget de entrada para borrar el contenido?

Question

con Twitter arranque es bastante recta hacia adelante para crear un widget de entrada de búsqueda de estilo:

También la x es factible con Twitter arranque, pero el posicionamiento de la x en ese lugar, requiere un poco de ajuste fino CSS.

Logré obtener la x en esa posición, pero no es muy confiable. Con un diseño receptivo y diferentes resoluciones, la x se desplaza por completo.

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

Antes de tratar de reinventar la rueda, ¿hay alguna librería javascript existente que podría convertir una entrada en una entrada-con-un-x-botón? Algo como Chosen.js para este propósito? ¿O algún consejo sobre cómo podría hacer esto de una mejor manera?

Muchas gracias,

Answer 1

Echa un vistazo a this post

This fiddle básicamente hace lo que está buscando hacer.

Se dirige en la dirección correcta.

Answer 2

Con algunos cambios en el código de arranque y un poco de JavaScript puede lograr esto, de hecho, puede colocar el control que desee dentro del cuadro de texto. Aquí está un ejemplo:

Y aquí está el marcado final utilizada para generarlo:

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

Para la comprobación completa de código vistazo a este post: http://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html

Answer 3

Básicamente, la clave es para usar el posicionamiento relative y left:-20px en el elemento de limpieza.

Por ejemplo:

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

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

De esta manera el lapso se superpondrá a la entrada a la izquierda de la misma. Puede adjuntar un controlador de eventos para borrar el campo de entrada.