ホームへ

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

2020年11月29日

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やhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

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

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

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

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ