
フォームのインタフェースデザイン(3)--チェックボックスとラジオボタンのデザイン
エ・ビスコム・テック・ラボ
2008-06-13 08:00:00
チェックした項目のデザインを設定する
複数の選択肢から項目を選んでもらうときには、フォームのチェックボックスやラジオボタンを利用することができる。このとき、:checkedセレクタを利用すれば、チェックを付けて選択した項目のデザインを設定することが可能だ。
:checkedセレクタはCSS 3の勧告候補「Basic User Interface Module」で提案されており、これまではFirefoxとOperaが対応していたが、Safariでもバージョン3以降で利用できるようになった。Internet Explorerはバージョン8ベータ版でも対応していない。
セレクタ | Firefox | Safari | Opera | Internet Explorer |
---|---|---|---|---|
:checked | ○ | 3以上で対応 | ○ | × |
たとえば、次のソースでは商品の選択肢をチェックボックスで用意している。このうち、「商品01」にはchecked属性を指定して、標準でチェックを付けて表示するように設定している。また、スタイルシートでは:checkedセレクタを利用して、チェックした項目を黄緑色の罫線で囲んで表示するように設定している。
input:checked{ outline: solid 3px greenyellow; }
※ブラウザで表示を確認する
ブラウザでの表示を確認すると、次のように表示される。
ページを読み込んだ段階での表示

- 「商品01」のチェックボックスに適用されるセレクタの設定:input:checked {〜}
- 「商品02」のチェックボックスに適用されるセレクタの設定:なし
「商品03」のチェックボックスに適用されるセレクタの設定:なし
ポイント:
- チェックした「商品01」のチェックボックスのまわりに黄緑色の罫線が表示される。
- チェックしていない「商品02」と「商品03」のチェックボックスのまわりには何も表示されない。
「商品02」と「商品03」を選択したときの表示

- 「商品01」のチェックボックスに適用されるセレクタの設定:なし
- 「商品02」のチェックボックスに適用されるセレクタの設定:input:checked {〜}
「商品03」のチェックボックスに適用されるセレクタの設定:input:checked {〜}
ポイント:
- チェックした「商品02」と「商品03」のチェックボックスのまわりに黄緑色の罫線が表示される。
- チェックしていない「商品01」のチェックボックスのまわりには何も表示されない。
標準でチェックした項目のデザインを設定する
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
SECCON2020レポート第二弾!
-
M365 活用のセキュリティ対策
-
未来のセキュリティイノベーターへ
-
クラウド時代に理想のセキュリティ
-
SoRとSoEをつなぐDX推進の要
-
厳しい目が向けられる内部不正
-
第4回CNBFミートアップレポート
-
デジタルを当たり前と言えるか?
-
リモート、オフィス、オンサイト
-
セキュリティの今を知る
-
次の一手はこれだ!
-
ネットワークもサービスとして使う
-
部分最適だけではダメ
-
コスト・運用の壁を崩す!
-
特集:IT最適化への道
-
データの散在と非常率運用がネック
-
連載!プロが語るストレージ戦略
-
IDaaSって何?
-
ビッグデータ最前線!
-
企業のリスクマネージメント対策に
-
いまさら聞けない「PPAP」
-
いまあるデータで身近な業務をDX
-
ハイブリッドクラウドとAI
-
連載!プロが語るストレージ戦略
-
連載!プロが語るストレージ戦略
-
ゼロトラストに向けた道のりを支援
-
その先へ
-
時代が求める生体認証への期待
-
次期自治体ネットワーク強靭化へ
-
性能の大幅向上を実現!
-
明日からではもう遅い?!
-
エンジニアのためのREHL8まとめ
-
DX時代のアプリケーションセキュリティ
-
漫画で解説:IoTはじめの一歩