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

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演示 。

Answer 2

您想要的纯CSS：

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

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

演示

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

Answer 3

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

我会使用一些JavaScript来检查所选项目是否未禁用，然后再应用CSS。