javascript - 如何在 HTML5 中为 'option' 的禁用和选定的 'select' 设置样式

Question

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

因此给出以下代码:

<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预装了这个。

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