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

注意: 这个问题不是关于自定义下拉菜单的。这只是关于在 CSS 中的 select 元素中设计 <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，那么还有什么可能的呢。

enter image description here

我想要这样的风格或尽可能接近。

enter image description here

我在这里尝试了 http://jsfiddle.net/jitendravyas/juwz3/3/，但是 Chrome 除了字体颜色之外没有显示任何样式，而 Firefox 显示了更多样式。如何得到边框和填充工作在 Chrome 呢？

345128 次浏览
小开

I've played around with select items before and without overriding the functionality with JavaScript, I don't think it's possible in Chrome. Whether you use a plugin or write your own code, CSS only is a no go for Chrome/Safari and as you said, Firefox is better at dealing with it.

小开

There is no cross-browser way of styling option elements, certainly not to the extent of your second screenshot. You might be able to make them bold, and set the font-size, but that will be about it...

小开
最佳答案

EDIT 2015 May

Disclaimer: I've taken the snippet from the answer linked below:

Important Update!

In addition to WebKit, as of Firefox 35 we'll be able to use the appearance property:

Using -moz-appearance with the none value on a combobox now remove the dropdown button

So now in order to hide the default styling, it's as easy as adding the following rules on our select element:

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

For IE 11 support, you can use [::-ms-expand][15].

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

Old Answer

Unfortunately what you ask is not possible by using pure CSS. However, here is something similar that you can choose as a work around. Check the live code below.

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>

EDIT

Here is the question that you asked some time ago. How to style a <select> dropdown with CSS only without JavaScript? As it tells there, only in Chrome and to some extent in Firefox you can achieve what you want. Otherwise, unfortunately, there is no cross browser pure CSS solution for styling a select.


提交答案