Possible Duplicate:
07000
07001
注意:此问题不是关于自定义下拉菜单。这只是关于样式的可能性< option>元素与CSS
如何为< 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中获取边框和填充工作?
解决方法
编辑2015年5月
重要更新!
除了WebKit,从Firefox 35,我们将能够使用appearance属性:
Using
-moz-appearance
with thenone
value on a comboBox now remove the
dropdown 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。但是,这里是类似的,你可以选择作为一个工作。检查下面的直播代码。
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解决方案样式选择。