頭脳一式

人の記憶なんて曖昧なもの。すべての情報を頭に記憶するなんてナンセンス。困ったらここに来ればいいじゃん?というスタンスで最強のナレッジベースを目指すブログ

【IE11】select要素の非活性時に文字色を変える方法(活性時の文字色を維持する方法)

環境

  • Windows7/8.1/10
  • IE11(エンタープライズモードなし/互換表示モードなし)

問題

以下のようにselect要素を非活性にすると、活性時に比べて文字色が薄くなってしまう場合があります。
f:id:shiakisudev:20190520020414p:plainIE11で見ないと文字色が薄くなっていないかもです。 f:id:shiakisudev:20190520020414p:plain
★活性時

★非活性時

解決方法

1.疑似要素disabledを使う

select:disabled {
  color: blue;
}

2.疑似要素::-ms-valueも使う

disabledだけでは効かない場合、次のように::-ms-valueも組み合わせて使うと大抵効くことが多いです。

select:disabled::-ms-value {
  color: blue;
}