Webの入力フォームでは、ユーザーに選択式の項目を配置することがよくあります。
例えば、性別を選択するものや、支払い方法を選択するものなどです。
項目を選択するコントロールとしては、セレクトボックスとラジオボタンがありますが、選択肢の数が多くない場合は、直感的にわかりやすいのでラジオボタンの方が適しています。
Bulmaにはラジオボタンのスタイルを設定するクラスが用意されています。
今回はラジオボタンをスタイリングするradioクラスを紹介します。
ラジオボタンのスタイルを設定するradioクラス
radioクラスは、ラジオボタンをラップするコンテナです。
HTMLでのラジオボタンは、「input type=”radio”」で記述しますが、このinput要素に指定するのではなく、input要素の親となる要素を配置して、そこにクラスを指定します。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<div class="control"> <label class="radio"> <input type="radio" name="answer"> はい </label> <label class="radio"> <input type="radio" name="answer"> いいえ </label> </div> |
ここではinput要素の親要素にlabel要素を使用して、label要素のclass属性にradioクラスを指定しています。
ラジオボタンでは、何らかのテキスト（ラベル）を配置する場合が多いので、radioクラスはほとんどの場合、label要素のクラスとして指定することになります。
ブラウザーでの表示
Bulmaでは、クロスブラウザの互換性とユーザーエクスペリエンスを維持することを考慮し、意図的にスタイルが設定されていません。（これはチェックボックスと同様です。）ですので、radioクラスを使用したラジオボタンのスタイルは非常にシンプルなものになっています。
ボタンやテキストボックスなど、他のコントロールのスタイルを設定するクラスでは、色やサイズなどの様々なオプションの指定が可能となっていますが、ラジオボタンでは設定できるオプションが用意されていません。
ボタンが選択されている状態では、次のような表示になります。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<div class="control"> <label class="radio"> <input type="radio" name="answer" checked> はい </label> <label class="radio"> <input type="radio" name="answer"> いいえ </label> </div> |
disabled属性を指定してラジオボタンを無効な状態にすると、次のような表示になります。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="control"> <label class="radio"> <input type="radio" name="answer"> はい </label> <label class="radio"> <input type="radio" name="answer"> いいえ </label> <label class="radio" disabled> <input type="radio" name="answer" disabled> 知りません </label> </div> |
3番目（一番右）のラジオボタンを無効にしています。
