inputタグでdisabledした要素のデザインを変更 | KH-WEBLOG

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;  
} 

みたいな感じに使います。