如何仅使用 CSS 设置 <option> 样式？

How to style the <option> with only CSS?

提问by Jitendra Vyas

Note: This question is not about making a custom dropdown. It's only about possibilities of styling <option>elements within the select element in CSS

注意：此问题与制作自定义下拉列表无关。这只是关于<option>CSS 中 select 元素中样式元素的可能性

How can I style <option>s of a <select>element with cross-browser compatibility? I know many JavaScript ways which customize the dropdown to convert into <li>, which I'm not asking about.

如何设置具有跨浏览器兼容性<option>的<select>元素的样式？我知道许多 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>

I'm asking what could be possible with CSS only, with compatibility for IE9+, Firefox, and Chrome.

我问的是仅使用 CSS 可以实现什么，并兼容 IE9+、Firefox 和 Chrome。

I want to style like this or as close as possible.

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

I tried here http://jsfiddle.net/jitendravyas/juwz3/3/, but Chrome doesn't show any styling except font color, while Firefox shows some more. How to get border and padding work in Chrome too?

我在这里尝试过http://jsfiddle.net/jitendravyas/juwz3/3/，但是除了字体颜色之外，Chrome 不显示任何样式，而 Firefox 显示更多。如何在 Chrome 中获得边框和填充功能？

采纳答案by Savas Vedova

EDIT 2015 May

编辑 2015 年 5 月

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

免责声明：我从下面链接的答案中提取了片段：

Important Update!

重要更新！

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

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

Using -moz-appearancewith the nonevalue on a combobox now remove the dropdown button

使用-moz-appearance与none上一个组合框的值立即卸下下拉按钮

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

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

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

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

对于 IE 11 支持，您可以使用 [ ::-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.

不幸的是，使用纯 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>

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.

这是你前段时间问的问题。 如何在没有 JavaScript 的情况下仅使用 CSS 设置 <select> 下拉列表的样式？正如它所说的那样，只有在 Chrome 中，并且在某种程度上在 Firefox 中，您才能实现您想要的。否则，不幸的是，没有用于样式选择的跨浏览器纯 CSS 解决方案。

回答by danwellman

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...

没有跨浏览器样式选项元素的方式，当然不会达到第二个屏幕截图的程度。您也许可以将它们加粗，并设置字体大小，但仅此而已……

回答by cchana

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.

我之前玩过选择项目并且没有用 JavaScript 覆盖功能，我认为在 Chrome 中这是不可能的。无论您使用插件还是编写自己的代码，CSS 都不适用于 Chrome/Safari，正如您所说，Firefox 更擅长处理它。