2012-10-03 69 views
6

與Twitter的引導是非常直截了當地創建一個搜索樣式輸入小部件:如何在輸入小部件中放置x以清除內容?

enter image description here

另外,x是可行的與Twitter的引導,但放置在這個位置的X,需要一些CSS細化和微調。

我設法讓x在那個位置,但它不是很可靠。採用響應式設計和不同的分辨率,x會完全被置換。

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

在試圖重新發明輪子之前,有沒有任何現有的JavaScript庫,可以在一個輸入與一個X按鈕? Chosen.js就是爲了這個目的嗎? 或者有什麼建議,我可以以更好的方式做到這一點?

非常感謝,

+0

你嘗試過使用像素而不是EM嗎?這可能會使其立場更可靠 – MrOBrian

+0

謝謝你的提示,我會試試這個,讓你知道。 – Houman

回答

6

退房this post

This fiddle基本上沒有你在找什麼做的。

你正朝着正確的方向前進。

+0

我使用[修改的小提琴](http://jsfiddle.net/Q7fRB/563/)簡化了@karthikr CSS。 – Pete

1

通過對一些引導代碼和一些JavaScript的一些更改,您可以實現此目的,實際上您可以在文本框中放置任何需要的控件。這裏有一個例子:

enter image description here

這裏是用來生成它最終的標記:

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

對於完整的代碼檢查這個職位:http://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html

0

基本上關鍵是在結算元素上使用relative定位和left:-20px

例如:

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

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

通過這種方式,將跨度輸入重疊以它的左側。您可以附加一個事件處理程序來清除輸入字段。