KH-WEBLOG TOP > WEBメモ > CSS > inputタグでdisabledした要素のデザインを変更

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

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

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パンくずリスト パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事