ラジオボタン
用途
複数の条件の中からひとつのみ選択する際に使用します。
サイズ
※幅、高さ、デザインは初期デザイン時のみ変更可能です。
- 幅:
- 18px
- 高さ:
- 18px
改変対象ファイル
- CSS:
- tag.scss 内に改変対象箇所があります。
状態
以下はサンプルです。用途を定めてデザインしてください。
- 通常:
-
<label><input type="radio"><span class="inputCheck"></span></label>
- 文字あり:
-
<label><input type="radio"><span class="inputCheck"></span>テキスト</label>
- 選択:
-
<label><input type="radio" checked><span class="inputCheck"></span></label>
- エラー:
-
<label><input type="radio" class="error"><span class="inputCheck"></span></label>
- 非アクティブ:
-
<label class="disabled"><input type="radio"><span class="inputCheck"></span></label>
改変対象ファイル
- CSS:
- tag.scss 内に改変対象箇所があります。
タグ仕様
ラジオボタンに特殊な装飾を施したいため、INPUT[RADIO]は CSS で非表示 (デフォルト装飾と透過を0)にして、SPANを使い疑似的にチェックボックスを再現しています。これにより、TABキーでもフォーカス可能になります。