disabledの文字色や背景色を指定する方法2020年11月29日inputタグでdisabledを指定すると入力したりクリックしたり選択することができない状態にできます。「できない」状態であることが、文字色や背景色を変えて目視でわかるようにしたいですよね。disabledの文字色やplaceholder、背景色(background-color)をCSSで指定する方法について解説します。結論:疑似クラス「:disabled」を使う「:disabled」はinputにdisabledが指定されているときに機能する疑似クラスです。これを利用することで「できない」状態のときだけにCSSを指定することができます。上は入力可能なinput、下はdisabledが指定され入力不可能なinputです。disabled>「:disabled」を指定しcolorやbackgroundで文字色、背景色を変更しています。プレスホルダーは指定方法にクセがあります。基本的には「::placeholder」と「color」で指定します。これだけだとIEが効かないため「:-ms-input-placeholder」も指定します。「::placeholder」と「:-ms-input-placeholder」を一行でまとめて指定しようとすると効かなくなるためそれぞれで指定しましょう。利用不可時のプレスホルダーを指定したいときは下記のようにつなげます。主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。この記事を読むCSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。結論:疑似クラス「:disabled」を使うあとはcolorで文字色を変えたり、background-colorで背景色を変えることができます。disabledの文字色や背景色を指定する方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。