如何使用只使用CSS的<选项>样式？

Question

如何使用只使用CSS的<选项>样式？

注意：这个问题与定制下拉列表无关。只是关于造型的可能性<option>CSS中的SELECT元素中的

我该怎么做<option>一分为二<select>元素是否具有跨浏览器兼容性？我知道许多定制下拉列表以转换为<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

没有跨浏览器方式的样式选项元素，当然不是你的第二个屏幕截图的程度。你也许可以让他们大胆，并设置字体大小，但就这样.

Answer 2

我以前玩过SELECT项目，也没有用JavaScript覆盖功能，我认为在Chrome中是不可能的。无论您使用插件还是编写自己的代码，CSS对于Chrome/Safari来说都是一个“不适用”，正如您所说的，Firefox在处理它方面做得更好。