İçeriği temizlemek için giriş widget'ında bir x nasıl konumlandırılır? twitter ile

Question

oldukça düz bir ara tarzı girdi aracı oluşturmak için ileriye doğru önyükleme:

Ayrıca x Heyecan bootstrap ile yapılabilir, ama bu noktada x konumlandırma, bazı CSS ince ayarla gerektirir.

Ben bu pozisyonda x başardı, ama çok güvenilir değildir. Duyarlı tasarım ve farklı çözünürlüklerde x tamamen yer değiştirir.

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

tekerleği yeniden icat etmek denemeden önce, bir girdi-ile-bir-x-düğmesini bir giriş dönüşebilecek varolan herhangi bir javascript kitaplık var mı? Bu amaç için Chosen.js gibi bir şey? Veya bunu nasıl daha iyi bir şekilde yapabilirim?

Birçok sayesinde

Answer 1

Kontrol dışarı this post

This fiddle temelde yapmanız aradıklarını yapar. Doğru yönde gidiyoruz

. Eğer metin içindeki istediğiniz herhangi bir kontrol yerleştirebilirsiniz aslında bu başarabilirsiniz önyükleme kodu ve biraz JavaScript bazı bazı değişiklikler ile

Answer 2

. İşte bir örnek:

Ve burada nihai bunu üretmek için kullanılan biçimlendirme geçerli: http://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html

Answer 3

Temelde anahtarıdır: Tam kod check out this post için

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

temizleme elemanında relative konumlandırma ve left:-20px kullanımı. Örneğin

:

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

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

yayılma için solundaki giriş üst üste Bu şekilde. Giriş alanını temizlemek için bir olay işleyicisini ekleyebilirsiniz.