CSS樣式選擇輸入像rent.com

Question

有誰知道一個非常原生的選擇插件造型<select>。我的意思是說，你用「選擇」框自己交互，而不是用UL或DIV創建的flux select，這似乎是大多數選擇插件處理這個問題的方式。我能找到的最好的例子是http://www.rent.com;在該網站上，當您單擊flux a時，您最終會與select元素進行交互。它非常完美，響應速度快，如果您處理複雜的JavaScript，則無需傳遞事件偵聽器。

翻看源代碼我無法弄清楚它是如何完成的，我知道它與label包裝select有關。這有填充覆蓋整個select框。現在有沒有人知道這是如何做的是一個JS插件或只是一些CSS魔術？

Answer 1

有兩個主要部分，以他們的解決方案是：

1. 他們設置select爲0，所以你看不到選擇所有，直到它被點擊（甚至然後你只看到的opacity下拉麪板）。它被操縱直接放在步驟2中描述的a標籤上，以便它仍處理點擊事件。
2. 有一個兄弟a標記被修改爲看起來不錯（圓角灰色邊框，漂亮的字體，CSS生成的下拉箭頭等）。當select的值更改時，javascript會採用所選值並更新a中的文本。

我把它放在一起快速小提琴：http://jsfiddle.net/RKeks/。我確實使用了label而不是我的a元素。

Answer 2

我看着它，它看起來像選擇的不透明度設置爲0，所以你不能看到它的醜陋的默認外觀，它也絕對位於另一個漂亮的區域的頂部。

Answer 3

您沒有看到select，如果您使用Chrome-devtools，則可以將html部件分開，並更輕鬆地查看它。

你看到這個箭頭的<a>裏面，它是<span class="icon i-right i-triangle-down-white"></span>

的標籤可能是使它可選擇的選擇本身的小條之外。