ラジオボタン・チェックボックス
基本的なもの (公式サイト
テキストフォームがかなり良いので、もうちょっと何かあったんじゃないかと思うのですが、普通です。
ただ、disabled(選択させない)は禁止マークが出るのは格好良いですね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="checkbox"> <label><input type="checkbox" value="">check 1</label></div><div class="checkbox"> <label><input type="checkbox" value="">check 2</label></div><div class="checkbox disabled"> <label><input type="checkbox" value="" disabled="">check 3</label></div><div class="radio"> <label><input type="radio" name="radio" id="radio1" value="radio1"> radio1</label></div><div class="radio"> <label><input type="radio" name="radio" id="radio2" value="radio2" checked=""> radio2</label></div><div class="radio disabled"> <label><input type="radio" name="radio" id="radio3" value="radio3" disabled=""> radio3</label></div> |
インラインで表示する
面倒くさく囲ってるのでレスポンシブで綺麗に段落ちしても良さそうですが、ただ改行されるだけのようです。残念
1 2 3 | <label class="checkbox-inline"><input type="checkbox" value="">check 1</label><label class="checkbox-inline"><input type="checkbox" value="">check 2</label><label class="checkbox-inline"><input type="checkbox" value="" disabled="">check 3</label> |
label for="*"
labelで囲うのがデフォルトのよう。地味にこまるシーンが有ります
1 2 3 | <input type="checkbox" name="check1" id="check1"><label for="check1" class="checkbox-inline">check1</label><input type="checkbox" name="check2" id="check2"><label for="check2" class="checkbox-inline">check2 </label><input type="checkbox" name="check3" id="check3"><label for="check3" class="checkbox-inline">check3 </label> |
指定しない
太字？そして微妙
1 2 | <input type="checkbox" name="check10" id="check10"><label for="check10"> check1</label><label><input type="checkbox" name="check11" id="check11">check11</label> |