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

Question

注意:此问题与制作自定义下拉列表无关.它只是关于<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中获得边框和填充功能？

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>

编辑

这是你前一段时间提出的问题. 如何在没有JavaScript的情况下使用CSS设置<select>下拉列表的样式？ 正如它所告诉的那样,只有在Chrome中,在某种程度上在Firefox中,你才能实现你想要的.否则,遗憾的是,没有用于样式化选择的跨浏览器纯CSS解决方案.