使用属性 'disabled' 更改 'option' 颜色

Question

我想更改属性为 disabled 的 <option> 的字体颜色。

我试过了

option:disabled { color: red }

还有这个

option[disabled] { color: red }

两者都有效，但只有当您点击 select 字段时颜色才会变红。默认情况下它是黑色的。我该如何更改它？

这是一个例子：http://jsfiddle.net/y0g0stbb/

Answer 1

试试这个：

CSS:

    select{
    color:red;
    }
    option{
    color:black;
    }

Answer 2

不能同时select编辑和禁用。

option:disabled {
  color: red;
}

<select>
  <option selected>Choose something</option>
  <option disabled>1</option>
  <option>2</option>
  <option>3</option>
</select>

如果您想禁用 select，而不是您需要将禁用选项移动到 select 标签

select:disabled {
  color: red;
}

<select disabled>
  <option selected>Choose something</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Answer 3

试试这个，希望它会起作用：在 html 中：

    <select>
      <option value="">Choose something</option>
       <option disabled="disabled" value="" class="red">1</option>
       <option disabled="disabled" value="" class="red">2</option>
       <option disabled="disabled" value="" class="red">3</option>
    </select>

在 CSS 中：

   select :disabled.red{
   color: red;
   }

Answer 4

如果没有 selected 有效选项，你可以用一点 Javascript 做这样的事情：

<select class="">[options]</select>

如果有 selected 有效选项，您只需在 select 元素中通过 javascript 放置一些 class：

<select class="selected">[options]</select>

然后在你的 CSS:

select{
 color: [not selected color];
}
select.selected{
 color: [selected color];
}

Answer 5

颜色必须应用于 select 元素，而不是 option。所以，你可以这样做：

您可以使用 required 并将空值分配给第一个选项：

<select required>
    <option value="" disabled>0</option>
    <option value="1">1</option>
</select>

css:

select:invalid { color: red; }

If you do this, when the option with empty value is selected, the select element will be invalid, and so the above css class 会触发。

解决这个问题要感谢这个 post 的答案：

使用属性 'disabled' 更改 'option' 颜色

Change the 'option' color with the attribute 'disabled'

css

css-selectors