如何设置只有CSS的<option>？

可能重复：
如何风格<select>下拉用CSS只有没有JavaScript？
Html悬浮select框选项？

注意：这个问题不是关于自定义下拉菜单。 这只是关于使用CSSdevise<option>元素的可能性

如何devise具有跨浏览器兼容性的<select>元素的<option> ？ 我知道很多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中获得边框和填充function？

Answer 1

编辑2015年5月

免责声明：我已经从下面链接的答案摘录：

重要更新！

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

现在，在combobox中使用-moz-appearance属性可以取消下拉button

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

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

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

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

老答案

不幸的是，你所要求的是使用纯CSS不可能的。 但是，这里有一些类似的东西，你可以select作为解决方法。 检查下面的实时代码。

 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> 

Answer 2

没有跨浏览器的样式选项元素的方式，当然不是你的第二个截图。 你也许可以使它们变成粗体，并设置字体大小，但是这将是关于它的…

Answer 3

我已经玩过select的项目，而不必重写JavaScript的function，我不认为这是可能的在Chrome中。 无论是使用插件还是编写自己的代码，CSS对于Chrome / Safari来说都是不可行的，正如你所说的那样，Firefox在处理它时更好。