2

有谁知道一个非常原生的样式选择插件<select>。我的本机意思是您与“选择”框本身进行交互，而不是使用orselect创建的一些通量，这似乎是大多数选择插件处理此问题的方式。我能找到的最好的例子是http://www.rent.com；在该站点上，当您单击最终与元素交互的通量时。它非常完美，响应迅速，如果您处理复杂的 javascript，您不必传递事件侦听器。ULDIVaselect

查看源代码我无法弄清楚它是如何完成的，我知道它与label包装select. 这具有覆盖整个select盒子的填充物。有人现在是如何做到这一点的，它是一个 JS 插件还是只是一些 CSS 魔法？

4

3 回答 3

1

我已经查看过了，似乎选择的不透明度设置为 0，所以你看不到它丑陋的默认外观，而且它也绝对位于另一个漂亮区域的顶部。

于 2013-07-03T19:11:20.923 回答
1

您没有看到select，如果您使用 Chrome-devtools，您可以将 html 部分拖开并更轻松地查看它。

你看到的箭头在里面<a>，它是<span class="icon i-right i-triangle-down-white"></span>

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

于 2013-07-03T19:13:32.867 回答
0

他们的解决方案有两个主要部分：

  1. 他们将 的 设置opacity为select0，因此在单击它之前您根本看不到选择（即使这样您也只能看到下拉面板）。已对其进行操作，使其直接a位于步骤 2 中描述的标签上方，以便它仍能处理点击事件。
  2. 有一个兄弟a标签已被修改为看起来不错（圆形灰色边框、漂亮的字体、css 生成的下拉箭头等）。当 的值select更改时，javascript 会采用选定的值并更新a.

我为它整理了一个快速小提琴：http: //jsfiddle.net/RKeks/。我确实使用了 alabel而不是我的a元素。

于 2013-07-03T19:17:17.723 回答