如何在 HTML5 中设置“选择”的禁用和选定“选项”的样式答案

【问题标题】：How to style the disabled and selected 'option' of a 'select' in HTML5如何在 HTML5 中设置“选择”的禁用和选定“选项”的样式
【发布时间】：2014-08-27 04:08:17
【问题描述】：

我正在尝试使用“选择”标签的第一个“选项”来提示用户需要输入。因此，如果所选选项被禁用，我希望“选择”框以不同的颜色呈现选择。

所以给出以下代码：

<select>
  <option selected="selected" disabled="disabled">Choose best player...</option>
  <option>Walter Payton</option>
  <option>Jim McMahon</option>
  <option>Mike Singletary</option>
  <option>Richard Dent</option>
  <option>Steve McMichael</option>
  <option>Wilber Marshall</option>
</select>

我希望页面以灰色显示带有“选择最佳球员...”的下拉菜单，如果选择了非禁用选项，则更改颜色。

如果存在 css 解决方案，我更喜欢它，但在谷歌搜索了一段时间后，我开始确信需要一些 JavaScript。有什么简单的解决方案吗？

这是一个预加载的codepen。

【问题讨论】：

似乎是类似的问题。 stackoverflow.com/questions/5805059/select-placeholder?rq=1
option 标签的样式没有得到很好的支持。请参阅：stackoverflow.com/questions/8430279/…，请务必阅读此处链接的问题。

标签： javascript css html

【解决方案1】：

我认为你需要一点 javascript：

HTML

<select onchange="highlight(this)">
    <option class="invalid" selected="selected" disabled="disabled">Choose best player...</option>
    <option>Walter Payton</option>
    <option>Jim McMahon</option>
    <option>Mike Singletary</option>
    <option>Richard Dent</option>
    <option>Steve McMichael</option>
    <option>Wilber Marshall</option>
</select>

CSS

option.invalid {
    background: #eee;
}

option.valid {
    background: #ff8;
}

JavaScript

function highlight(field){
    field.options[0].className = 'valid';
}

jsFiddle Demo.

【讨论】：

这似乎不起作用（至少在使用 Chrome 或 Safari 的 Mac 上）。 :(
是的，看起来需要一点 javascript。您更新的答案使我朝着正确的方向前进。这是一个codepen，它显示了我在寻找什么。感谢您的帮助！

【解决方案2】：

我认为您的困难（使用纯 css 解决方案）将基于子元素的属性来定位您的选择元素。

我会使用一些 javascript 来检查所选项目是否未被禁用，然后应用您的 css。

【讨论】：

【解决方案3】：

你想要的纯css：

select option[disabled="disabled"][selected="selected"]
{text-decoration:underline;}

这将为禁用和选定集的选项设置样式。但是，请注意浏览器兼容性问题。

Demo

它不会在选择另一个选项时删除样式。根据MDNoption:checked应该可以使用，但我一直无法让它可靠地工作（http://jsfiddle.net/gb35e6yj/）。

【讨论】：