Question

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

我试过这个

option:disabled { color: red }

和这个

option[disabled] { color: red }

两者都有效但点击选择字段时颜色只会变红。默认情况下它是黑色的。我怎样才能改变它？

以下是一个示例：http://jsfiddle.net/y0g0stbb/

Answer 1

不能同时选择和禁用它。

option:disabled {
  color: red;
}

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

如果要禁用选择，则需要将禁用的选项移至选择标记

select:disabled {
  color: red;
}

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

Answer 2

试试这个，希望它能起作用：在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 3

必须将颜色应用于select元素，而不是option。因此，您可以这样做：

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

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

css：

select:invalid { color: red; }

如果执行此操作，则选择具有空值的选项时，select元素将无效，因此上述 css 类将触发。

此问题的答案已解决：Changing the color of a <select> depending on its value - CSS only(?)

Answer 4

试试这个：

CSS：

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

Answer 5

如果没有选定的有效选项，只需使用一点Javascript就可以执行此类操作：

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

如果有一个选定的有效选项，你可以在select元素中通过javascript简单地输入一些类：

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

然后在你的CSS中：

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

更改“选项”＆＃39;具有属性＆＃39;禁用的颜色＆＃39;

5 个答案: