Question

我正在尝试使用'select'标记的第一个'选项'作为用户提示输入是必需的。因此，如果禁用所选选项，我希望“选择”框以不同的颜色呈现选区。

所以给出以下代码：

<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

Answer 2

你想要的纯粹的CSS：

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

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

Demo

但是，当选择其他选项时，它不会删除样式。根据{{3}} option:checked应该可以使用，但我无法让它可靠地工作（MDN）。

Answer 3

我认为您的困难（使用纯css解决方案）将根据子元素的属性定位您的select元素。

我会使用一些javascript检查所选项目是否已禁用，然后应用您的CSS。

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

3 个答案: