IE11 で disabled 属性の select 要素の color (文字色)を変える。

簡易メモ

disabled 属性の select 要素は border や background-color と共に指定すると文字色が変わらない！

<select>
  <option>Normal</option>
</select>

<select disabled>
  <option>Disabled</option>
</select>

select {
  color: red;
  border: solid 1px black;
  background-color: orange;
}

select:disabled {
  color: blue;
  border: 1px solid black;
  background-color: orange;
}

そんなときは ::-ms-value 疑似要素と ::-ms-expand 疑似要素を使う。

select {
  color: red;
  border: solid 1px black;
  background-color: orange;
}

select:disabled {
  color: blue;
  border: 1px solid black;
  background-color: orange;
}

select:disabled::-ms-value,
select:disabled::-ms-expand {
  color: lime;
}

::-ms-value

Applies one or more styles to the content of a text or password input control, or a select control.

::-ms-expand

Applies one or more styles to the drop-down button of a select control.