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

注意：此问题与创建自定义下拉列表无关。它仅涉及<option>CSS中select元素内样式元素的可能性

如何<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中也可以使用边框和填充？

编辑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>

编辑

这是您前段时间提出的问题。 如何仅在没有JavaScript的情况下使用CSS设置<select>下拉列表的样式？ 正如它所表明的那样，只有在Chrome中以及在某种程度上在Firefox中，您才能实现所需的功能。否则，不幸的是，没有用于选择样式的跨浏览器纯CSS解决方案。

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

在没有覆盖JavaScript的功能之前，我一直在选择项目，因此我认为在Chrome中是不可能的。无论您使用插件还是编写自己的代码，对于Chrome / Safari来说，仅CSS都是不可行的，正如您所说的，Firefox更好地处理了它。