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>

的标签可能是使它可选择的选择本身的小条之外。