CSS input disabledの文字色や背景色を指定する方法

inputタグでdisabledを指定すると入力したりクリックしたり選択することができない状態にできます。

しかし、「できない」状態であることが、文字色や背景色を変えて目視でわかるようにしたいですよね。

input disabledの文字色やplaceholder、背景色（background-color）をCSSで指定する方法について解説します。

結論：疑似クラス「:disabled」を使う

「:disabled」はinputにdisabledが指定されているときに機能する疑似クラスです。

これを利用することで「できない」状態のときだけにCSSを指定することができます。

下記は例です。上は入力可能なinput、下はdisabledが指定され入力不可能なinputです。

<style>
    /*テキストボックスの基本*/
.txt{
    display: block;
    width: 100%;
    padding: 0.5em;
    border: 1px solid #999;
    box-sizing: border-box;
    background: #f2f2f2;
    margin: 0.5em 0;
}
    /*利用不可時*/
.txt:disabled{
    color: #FFF;
    background: #AAA;
}
    /*プレスホルダー*/
.txt::placeholder{
    color: #BBB;
}
.txt:-ms-input-placeholder{
    color: #BBB;
}
    /*利用不可時のプレスホルダー*/
.txt:disabled::placeholder{
    color: #FFF;
}
.txt:disabled:-ms-input-placeholder{
    color: #FFF;
}
</style>

<input type="text" class="txt" placeholder="入力可">
<input type="text" class="txt" placeholder="不可" disabled>

「:disabled」を指定しcolorやbackgroundで文字色、背景色を変更しています。

プレスホルダーは指定方法にクセがあります。

基本的には「::placeholder」と「color」で指定します。

これだけだとIEが効かないため「:-ms-input-placeholder」も指定します。「::placeholder」と「:-ms-input-placeholder」を一行でまとめて指定しようとすると効かなくなるためそれぞれで指定しましょう。

利用不可時のプレスホルダーを指定したいときは下記のようにつなげます。

「:disabled::placeholder」

↓疑似クラスについてもっと詳しく知りたい方はこちら

【まとめ】CSS input disabledの文字色や背景色を指定する方法

結論：疑似クラス「:disabled」を使う

あとはcolorで文字色を変えたり、background-colorで背景色を変えることができます。

以上、CSS input disabledの文字色や背景色を指定する方法でした。