如何仅使用 CSS 来设置 的样式？

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

我该如何设计风格<option>s of a <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/ http://jsfiddle.net/jitendravyas/juwz3/3/，但 Chrome 不显示除字体颜色之外的任何样式，而 Firefox 显示更多样式。如何在 Chrome 中获得边框和填充功能？

编辑 2015 年 5 月

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

重要更新！

除了 WebKit 之外，截至火狐35 http://jsfiddle.net/Etr4F/我们将能够使用appearance财产：

Using -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>

EDIT

这是您不久前问过的问题。如何仅使用 CSS 而不使用 JavaScript 来设置 下拉菜单的样式？ https://stackoverflow.com/questions/1895476/how-to-style-select-dropdown-with-css-only-without-javascript正如它所说，只有在 Chrome 中以及在某种程度上在 Firefox 中你才能实现你想要的。否则，不幸的是，没有跨浏览器的纯 CSS 解决方案来设置选择样式。