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

　フォームのチェックボックスとラジオボタンのデザインに関連するCSS 3のセレクタには、前回紹介した:checkedと:defaultの他に、:indeterminateというセレクタがある。今回は、この:indeterminateセレクタを紹介する。また、JavaScriptを利用して、セレクタに未対応のブラウザで同等の処理を行う方法を簡単にまとめておきたい。

　なお、フォームのインタフェースデザインに関連したCSS 3の基本的なセレクタは、今回紹介する:indeterminateが最後となる。

グループ内に選択した項目がないラジオボタンのデザインを設定する

　フォームでは、name属性の値が同じラジオボタンをグループとして扱う。:indeterminateセレクタを利用すると、グループ内に選択した項目が1つもない場合にデザインを適用することが可能だ。

　たとえば、次のサンプルではラジオボタンを「A」と「B」の2つのグループに分けて用意した。グループ内に選択した項目がないときには、:indeterminateセレクタの設定により、黄緑色の罫線で囲むように設定している。

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

<form action="#" method="get">

<p>
A：
<label><input type="radio" name="item_a" value="item01" />A01</label>
<label><input type="radio" name="item_a" value="item02" />A02</label>
<label><input type="radio" name="item_a" value="item03" />A03</label>
</p>

<p>
B：
<label><input type="radio" name="item_b" value="item01" />B01</label>
<label><input type="radio" name="item_b" value="item02" />B02</label>
<label><input type="radio" name="item_b" value="item03" />B03</label>
</p>

</form>

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

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

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

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

• グループAに適用される設定：input:indeterminate {〜}

• グループBに適用される設定：input:indeterminate {〜}

• ポイント：

  • グループAとBのラジオボタンが黄緑色の罫線で囲んで表示される。

グループAの項目を選択したときの表示

グループAの項目を選択したときの表示

• グループAに適用される設定：なし

• グループBに適用される設定：input:indeterminate {〜}

• ポイント：

  • グループAのラジオボタンのまわりに表示された黄緑色の罫線は消える。
  • グループBのラジオボタンは黄緑色の罫線で囲んで表示される。

　なお、:indeterminateセレクタは、CSS 3の勧告候補「Basic User Interface Module」で提案されているセレクタだが、詳細は将来的な規格の中で定義することになっている。そのため、現時点で対応しているのはOperaのみとなっており、FirefoxやSafariはサポートしていない。Internet Explorerもバージョン8（ベータ版）を含めて未対応となっている。