Webの入力フォームでは、ユーザーに是か非かの2択の選択肢を選んでもらうことがよくあります。
例えば、規約に同意するかどうかを訪ねるものや、アンケートでの質問などです。
2択の選択には、ほとんどの場合にチェックボックスが使用されます。
Bulmaにはチェックボックスのスタイルを設定するクラスが用意されています。
今回はチェックボックスをスタイリングするcheckboxクラスを紹介します。
チェックボックスのスタイルを設定するcheckboxクラス
checkboxクラスは、チェックボックスをラップするコンテナになります。
HTMLでのチェックボックスは、「input type=”checkbox”」で記述しますが、このinput要素に指定するのではなく、input要素の親となる要素を配置してクラスを指定します。
HTML
|
1 2 3 4 |
<label class="checkbox"> <input type="checkbox"> ラベル </label> |
ここではinput要素の親要素にlabel要素を使用して、label要素のclass属性にcheckboxクラスを指定しています。
チェックボックスでは、何らかのテキスト（ラベル）を配置する場合が多いので、checkboxクラスはほとんどの場合、label要素のクラスとして指定することになります。
ブラウザーでの表示
Bulmaでは、クロスブラウザの互換性とユーザーエクスペリエンスを維持することを考慮し、意図的にスタイルが設定されていません。なのでcheckboxクラスを使用したチェックボックスの装飾は非常にシンプルなものになっています。
他のコントロールのスタイルを設定するクラスとは違い、オプションの指定などもありません。
チェックされている状態では、次のような表示になります。
HTML
|
1 2 3 4 |
<label class="checkbox"> <input type="checkbox" checked> 今後このウィンドウを表示しない </label> |
チェックボックスには、リンクを追加することができます。
HTML
|
1 2 3 4 |
<label class="checkbox"> <input type="checkbox"> <a href="#">利用規約</a>に同意する </label> |
また、チェックボックスを無効な状態にすることもできます。
HTML
|
1 2 3 4 5 6 7 8 9 |
<div class="field"> <div class="control"> <label class="checkbox" disabled> <input type="checkbox" disabled> 解約する </label> </div> <p class="help is-danger">契約期間が満了していません。</p> </div> |
