如何使用CSS设计<option>？

可能重复：
如何使用css而不使用javascript来设计<select>下拉菜单？
Html在悬停上选择框选项？

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

我如何设计具有跨浏览器兼容性的<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属性：

现在，在组合框中使用-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重写功能，我认为在Chrome中不可能。 无论您使用插件还是编写自己的代码，CSS仅仅是Chrome / Safari的不可或缺，正如您所说的，Firefox在处理它时更好。

链接地址: http://www.djcxy.com/p/7165.html

上一篇: How to style the <option> with only CSS?

下一篇: CSS scrollbar style cross browser