inputタグでdisabledした要素のデザインを変更
シェア
ツイート
最終更新日：
<input type="text" name="text1" id="text1" disabled="disabled" />
フォーム内でdisabledがついた要素は入力できない状態になりますが、
このdisabledの状態のデザインをCSSで簡単に変更できるようなので
そのやり方をメモ。
CSSの記述
:disabled擬似クラスと:enabled擬似クラスを使います。
:disabledはdisabled=”true“の状態の時に使用。
:enabledはdisabled=”false“の状態の時に使います。
個人的には:enabledのほうは使う機会はあまりない気がしますが・・・。
記述方法は
:disabled {
background-color: #cccccc;
}
個別に指定したい場合は
#text1:disabled {
background-color: #cccccc;
}
みたいな感じに使います。
CSSのおすすめ参考書
ポチップ
