フォームのインタフェースデザイン（3）--チェックボックスとラジオボタンのデザイン

チェックした項目のデザインを設定する

　複数の選択肢から項目を選んでもらうときには、フォームのチェックボックスやラジオボタンを利用することができる。このとき、:checkedセレクタを利用すれば、チェックを付けて選択した項目のデザインを設定することが可能だ。

　:checkedセレクタはCSS 3の勧告候補「Basic User Interface Module」で提案されており、これまではFirefoxとOperaが対応していたが、Safariでもバージョン3以降で利用できるようになった。Internet Explorerはバージョン8ベータ版でも対応していない。

　たとえば、次のソースでは商品の選択肢をチェックボックスで用意している。このうち、「商品01」にはchecked属性を指定して、標準でチェックを付けて表示するように設定している。また、スタイルシートでは:checkedセレクタを利用して、チェックした項目を黄緑色の罫線で囲んで表示するように設定している。

input:checked{
outline: solid 3px greenyellow;
}

商品選択：
商品01
商品02
商品03

※ブラウザで表示を確認する

　ブラウザでの表示を確認すると、次のように表示される。

ページを読み込んだ段階での表示

ページを読み込んだ段階での表示

• 「商品01」のチェックボックスに適用されるセレクタの設定：input:checked {〜}
• 「商品02」のチェックボックスに適用されるセレクタの設定：なし

• 「商品03」のチェックボックスに適用されるセレクタの設定：なし

• ポイント：

  • チェックした「商品01」のチェックボックスのまわりに黄緑色の罫線が表示される。
  • チェックしていない「商品02」と「商品03」のチェックボックスのまわりには何も表示されない。

「商品02」と「商品03」を選択したときの表示

「商品02」と「商品03」を選択したときの表示

• 「商品01」のチェックボックスに適用されるセレクタの設定：なし
• 「商品02」のチェックボックスに適用されるセレクタの設定：input:checked {〜}

• 「商品03」のチェックボックスに適用されるセレクタの設定：input:checked {〜}

• ポイント：

  • チェックした「商品02」と「商品03」のチェックボックスのまわりに黄緑色の罫線が表示される。
  • チェックしていない「商品01」のチェックボックスのまわりには何も表示されない。

標準でチェックした項目のデザインを設定する