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

【问题标题】：How to make a custom select option menu style without image in CSS?如何在 CSS 中制作没有图像的自定义选择选项菜单样式？
【发布时间】：2010-12-17 11:50:38
【问题描述】：

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

这很简单：
Select ▼
到
Select ▼
Value1
Value2
或类似的东西

HTML：

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

问题：如何在没有任何 JavaScript 的纯 CSS 中做到这一点？

【问题讨论】：

【解决方案1】：

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

我想出了 this 纯 HTML，hacky 解决方案，但它很烂。箭头在鼠标事件到达选择框之前捕获它们。你需要做一些黑客攻击来消除它。

【讨论】：

是的，确实如此。不可能只是在我脑海中闪过。但它比jsfiddle.net/hedaru/YZXcj 要好得多。选择文本与字符保持一致。使用“span”而不是“p”怎么样？
不幸的是，插件为此使用了图像。而且它不是纯 CSS。
我猜 span 也可以，它甚至不需要 display:block 的东西，因为它是一个内联元素:)。 Uniform 确实适用于图像。如果对您不方便，那么确实不是您要找的东西:(。
是的，确实如此。哦，我只知道我们不需要 display:block 。很酷，感谢您的帮助。 :D
哦，哎呀，我刚刚注意到我写了display:block，而p 元素有display:inline :D。我的意思是p 是一个blick 级别元素，需要display:inline，而span 默认是内联显示的:)。我想你还是明白了，我只是讨厌不精确:)。

【解决方案2】：

你可以看到here一个纯css的解决方案，只适用于webkit

【讨论】：

太糟糕了，它会弄乱所有不是 webkit 驱动的东西。在 IE 中设置表单元素的样式特别有趣，如果您尝试一下，Opera 只会给您指点：D。不过，感谢您的链接，这绝对是一本有趣的书。
实际上所有表单元素的样式都有些棘手。我总是更喜欢让他们……纯粹，并避免使用所有奇怪的技巧。
嗯...不是真的。他们正在使用嵌入图像（虽然我不确定这是否是正确的名称）。不会向服务器发出额外请求。 :)
嵌入图像？（双 d）:) 其他一些论坛告诉了这一点。我明白了，如果我因为不使用任何图像而找不到进一步的完成，那可能是一个很好的解决方案。谢谢。
看看这里css-tricks.com/data-uris我对旧浏览器不友好，但我想如果你使用这个解决方案，你不会太在意:)