如何为select[multiple]的所有option子元素应用CSS样式

我有一个包含大量随机内容、数量不固定的select[multiple]元素，示例option代码如下：

<option value="85" data-select2-id="38">dolcevita</option>
<option value="22" data-select2-id="4">a</option>
<option value="6" data-select2-id="5">aa</option>
<option value="78" data-select2-id="6">aaaa</option>
...
<option value="28" data-select2-id="7">ad2</option>

对应的完整select结构：

<select multiple>
  <option>example1</option>
  ...
</select>

我尝试用以下CSS为所有option设置样式，但没达到预期：

style css

 select[multiple] > option{
    background: red;
    color: black;
    ...
 }

请问该如何正确实现样式统一？

1. 修正基础CSS写法 #

你写的选择器逻辑是对的，但代码里多余的style css需要删除，正确的基础样式代码如下：

select[multiple] > option {
    background-color: red;
    color: black;
    /* 可添加浏览器支持的其他样式，比如字体大小 */
    font-size: 14px;
}

2. 处理选中状态的样式 #

如果需要给选中的option单独设置样式，可以使用:checked伪类：

select[multiple] > option:checked {
    background-color: darkred;
    color: white;
}

3. 注意浏览器兼容性限制 #

原生<option>元素的样式支持有限，不同浏览器对部分CSS属性（比如padding、margin、border）的渲染不一致，甚至完全不生效——这是因为浏览器对原生表单控件的渲染机制有固定限制，无法通过CSS完全自定义。

4. 如果你用了Select2插件（从data-select2-id属性判断） #

如果页面里用了Select2来美化select，原生option的CSS不会生效，需要针对Select2的自定义DOM结构写样式：

/* 所有下拉选项的样式 */
.select2-results__option {
    background: red;
    color: black;
    padding: 8px 12px; /* Select2支持padding等样式 */
}

/* 选中状态的选项样式 */
.select2-results__option--selected {
    background: darkred;
    color: white;
}

内容的提问来源于stack exchange，提问作者Samuel D.