CSS3でフォームの有効・無効のスタイルを設定する

UI擬似クラスも追加されてます。 Ardor(@ArdorOnline)です。 Webアプリケーションを開発する際に、フォームを利用します。フォームにもスタイルを色々と設定できるのですが、今回はUI擬似クラスを利用して有効・無効時のスタイルを指定してみます。

UI擬似クラス

フォームが有効な場合は「:enabled」、無効な場合は「:disabled」でスタイルを指定することができます。フォームは、何も指定しなければ有効な状態で表示されますが、排他制御などで入力不可にしたい場合は、disabledを指定して無効にするのが一般的です。

よく「無効(disabled)にした場合に見た目を変更できませんか？」と依頼されることが多いです。需要は少なからずあります。

UI擬似クラスで有効・無効を指定するセレクタは次の通りです。

セレクタ	適用先	サンプル
:enabled	有効な状態の要素に適用。	:enabled { background-color: white; }
:disabled	無効な状態の要素に適用。	:disabled { background-color: lightgray; }

フォームに対して有効・無効を指定する記述例です。

.sample:enabled {
  background-color: #FFFF00;
}
.sample:disabled {
  background-color: lightgray;
}

有効状態の場合は、薄い黄色表示を指定しています。
無効状態の場合は、ライトグレーを指定しています。

見た目のサンプルは次の通りです。

有効：

無効：

Javascriptなどで入力チェックや排他制御で利用する際に使える使えるテクニックです。

Webアプリケーションが多くなってきて、この様なUI擬似クラスが数多く出てくるようになりました。まだまだ沢山ありますので、少しずつご紹介していきたいと思います。

最後までお読み頂きありがとうございます。