CSS3シリーズが続いています。 Ardor(@ArdorOnline)です。 今回は、フォームの中でもチェックボックスやラジオボタンの状態に応じてスタイルの指定を行う方法をご紹介します。
状態指定セレクタ
チェックボックスやラジオボタンの状態に応じて、スタイルを指定するセレクタは、次の２つがあります。
| セレクタ | 適用先 | サンプル |
|---|---|---|
| :checked | オンの状態のラジオボタンやチェックボックスに適用。 | :checked + label { background-color: red; } |
| :indeterminate | 不確定な状態のチェックボックスに適用。 | :indeterminate + label { background-color: red; } |
特に注目するのは、不確定な状態に指定ができることです。
チェックボックスやラジオボタンには、指定が何もされていない状態(不確定な状態)が存在します。
この不確定状態にスタイルを指定することができるのが、indeterminateです。
※不確定状態はHTML5から追加された要素です。
使い方としては、チェックボタンやラジオボタンを選択して欲しい場合に、 スタイルを指定して不確定状態であることをユーザーにアピールすることができます。
スタイルの記述
スタイルの記述は次の通りになります。
ポイントは、チェックボックスやラジオボタンとクラスと合わせてラベルもスタイルで指定します。
.sample {
background-color: palegreen;
}
.sample:checked + label {
background-color: red;
}
.sample:indeterminate + label {
background-color: yellow;
}
未選択状態では「緑」、選択状態では「赤」、不確定状態では「黄」としてみました。
尚、不確定状態は記事を開いた時、一回だけ有効です。
一度でもチェックした場合は、選択状態または未選択状態となります。
サンプル
サンプルは次の通りです。
実際に操作して反映状態を確認してみてください。
javascriptでイベントを処理している訳ではなく、チェック状態に応じてスタイルが切り替わっています。
最後に
UI擬似クラスを利用すると、javascriptを使わなくても、スタイルを変更できるので便利です。
HTML5とCSS3は、もっと色々なことがサポートされたみたいなので、またご紹介してみます。
最後までお読み頂きありがとうございます。
0 件のコメント:
コメントを投稿