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

Question

注意：此问题与制作自定义下拉列表无关。它只是关于在CSS

中的select元素中设置<option>元素样式的可能性

如何使用跨浏览器兼容性设置<option>元素的<select>样式？我知道很多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月编辑

免责声明：我从下面的答案中摘录了片段：

重要更新！

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

  

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

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

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中是不可能的。无论您是使用插件还是编写自己的代码，CSS都不适用于Chrome / Safari，正如您所说，Firefox更擅长处理它。