html - 如何在 CSS 中制作没有图像的自定义选择选项菜单样式？

Question

[我不想要Unicode字符]
例如:使用黑色向下三 Angular 形。
它将使用 -webkit-appearance: none; 使其看起来更好。

这很简单:
选择▼
到
选择▼
值 1
值 2
或类似的东西

HTML:

<select>
  <option>Value1</option>
  <option>Value2</option>
</select>

问题:如何在没有任何 JavaScript 的情况下使用纯 CSS 实现？

Answer 1

选择框并不是真正的样式化，所以如果这是不可能的，我也不会感到惊讶。可以使用一些有限的样式选项，但即使它们也不可靠。有效设置选择框样式的唯一方法是通过 jQuery，不幸的是，图像。我最喜欢的表单样式插件是这个 Uniform - 也许值得一看。

我想出了 this纯 HTML，hacky 解决方案，但很糟糕。箭头在到达选择框之前捕获鼠标事件。您需要进行一些黑客攻击才能消除这种情况。