如何仅使用 CSS 设置 <option> 样式？

Question

注意：这个问题不是关于制作自定义下拉菜单。这只是关于在 CSS 中的 select 元素中设置 <option> 元素样式的可能性

如何设置<select> 元素的<option>s 样式以实现跨浏览器兼容性？我知道许多 JavaScript 方法可以自定义下拉列表以转换为 <li>，这不是我要问的。

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

我在问只有 CSS 可以实现什么，并且兼容 IE9+、Firefox 和 Chrome。

我想要这样或尽可能接近的样式。

我在这里尝试过http://jsfiddle.net/jitendravyas/juwz3/3/，但除了字体颜色之外，Chrome 没有显示任何样式，而 Firefox 显示了更多样式。如何在 Chrome 中也获得边框和填充工作？

Answer 1

2015 年 5 月编辑

免责声明：我从下面链接的答案中获取了 sn-p：

重要更新！

除了 WebKit，从 Firefox 35 开始，我们将能够使用 appearance 属性：

在组合框上使用 -moz-appearance 和 none 值现在删除 下拉按钮

所以现在为了隐藏默认样式，就像在我们的选择元素上添加以下规则一样简单：

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

对于 IE 11 支持，您可以使用 [::-ms-expand][15]。

select::-ms-expand { /* for IE 11 */
    display: none;
}

旧答案

不幸的是，使用纯 CSS 无法实现您的要求。但是，您可以选择以下类似的方法作为解决方法。检查下面的实时代码。

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

编辑

这是您前段时间提出的问题。 How to style a <select> dropdown with CSS only without JavaScript? 正如它所说，只有在 Chrome 中，在某种程度上在 Firefox 中，你才能实现你想要的。否则，不幸的是，没有跨浏览器的纯 CSS 解决方案来设置选择样式。

Answer 2

没有跨浏览器的样式选项元素的方式，当然不是你的第二个屏幕截图的程度。您也许可以将它们加粗，并设置字体大小，但仅此而已...

Answer 3

我之前使用过选择项，并且没有使用 JavaScript 覆盖功能，我认为这在 Chrome 中是不可能的。无论您使用插件还是编写自己的代码，Chrome/Safari 都不能只使用 CSS，正如您所说，Firefox 更擅长处理它。