選擇與Google上顯示的框類似的框？

Question

我想創建一個類似谷歌上下方看<select>框：

我遇到了不少麻煩正確的造型吧。任何人都知道插件或解決方案？

Answer 1

嘗試Chosen plugin。雖然它看起來不像你展示的那樣，但它確實有許多值得調查的功能

Answer 2

我不知道的一個插件，但我可以給你你做你自己的插件的解決方案的想法：

首先，創建你的HTML，像這樣

<div class="customDropdown">Month<span><img src="littlearrows.jpg" /></span></div> 
<div id="customList"> 
    <ul> 
     <li>January</li> 
     <li>February</li> 
     <li>March</li> 
     <li>...etc.</li> 
    </ul> 
</div> 

然後你使用CSS來設置div的樣式，按照你想要的方式製作customDropdown，並且隱藏customList，並且可能確保它只顯示4行，滾動條位於右側（無論是自定義還是brwozer，你的選擇）。

之後，創建jQuery或Javascript代碼，在其中添加列表的行爲。您可能需要爲每個月份輸入一個ID，因此當用戶選擇該月份時，您將提取該值。

重要提示：這只是一個想法，我已經做了類似的事情，但我沒有給你一個完整的解決方案，你可以改變/修改甚至放棄這個想法，無論你喜歡，但這是我的方式接近它。

Answer 3

沒有任何Google公開發布其樣式。複製它並不容易，因爲不僅需要CSS，而且需要JavaScript。例如，有很多方法可以創建花哨的UI元素，比如Foundation。