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

エ・ビスコム・テック・ラボ
2008-06-13 08:00:00
  • このエントリーをはてなブックマークに追加

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

 checked属性を指定して標準でチェックを付けた項目のデザインは、:defaultセレクタで設定することが可能だ。:checkedセレクタがチェックを付けた項目に設定を適用するのに対して、:defaultセレクタはchecked属性を指定した項目に対して設定を適用する。

 :defaultセレクタもCSS 3の勧告候補「Basic User Interface Module」で提案されており、現在のところFirefox 3とOperaが対応している。Safari 3とInternet Explorer(バージョン8ベータ版を含む)では対応していない。

セレクタとブラウザの対応
セレクタFirefoxSafariOperaInternet Explorer
:default3以上で対応××

 たとえば、次のソースでは「商品01」にchecked属性を指定している。また、スタイルシートでは:defaultセレクタを利用して、checked属性を指定した項目を黄色の罫線で囲むように設定している。

input:default{
outline: solid 3px yellow;
}

商品選択: 商品01

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

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

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

ページを読み込んだ段階での表示 ページを読み込んだ段階での表示
  • 「商品01」のチェックボックスに適用されるセレクタの設定:input:default {〜}
  • 「商品02」のチェックボックスに適用されるセレクタの設定:なし
  • 「商品03」のチェックボックスに適用されるセレクタの設定:なし

  • ポイント:

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

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

「商品02」と「商品03」を選択したときの表示 「商品02」と「商品03」を選択したときの表示
  • 「商品01」のチェックボックスに適用されるセレクタの設定:input:default {〜}
  • 「商品02」のチェックボックスに適用されるセレクタの設定:なし
  • 「商品03」のチェックボックスに適用されるセレクタの設定:なし

  • ポイント:

    • チェックを外しても、checked属性を指定した「商品01」のチェックボックスのまわりに黄色の罫線が表示される。
    • 「商品02」と「商品03」をチェックしても、チェックボックスのまわりには何も表示されない。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]