HTML：选择选项样式不起作用答案

【问题标题】：HTML: Select Option styling not workingHTML：选择选项样式不起作用
【发布时间】：2018-10-03 00:17:01
【问题描述】：

我正在尝试设置选择框的样式，将所有颜色选项更改为红色。但是，当我加载网页时，选择框仍然是黑色的。有什么帮助吗？

这是 HTML 和 CSS：

select.selector option {
  color: red;
}

<select style="font-size: 16px; padding: 4px;" name="category" id="categoryselector" class="selector">
  <option disabled></option>
  <option value='all'>all</option>
  <option disabled></option>
  <option>Hardware and OS</option>
</select>

这是JSFiddle

【问题讨论】：

标签： html css

【解决方案1】：

选择选项样式在 Chrome (MAC OS X) 中不起作用，但它可以在所有系统上的 Firefox 以及 Chrome (Windows 7) 中起作用。

你可以在这里查看详细描述：Dealing with the select nightmare

【讨论】：

【解决方案2】：

您正在将颜色应用于选择框中的选项。要将其应用于可见的选择框，请使用：

select.selector{
color:red;
}

【讨论】：

【解决方案3】：

请试试这个代码：

select option {
    background: rgba(0,0,0,0.3);
    color:red;
}

【讨论】：