チェックボックス

サイズ

※幅、高さ、デザインは初期デザイン時のみ変更可能です。角丸は5px以下までとし、ラジオボタンと区別出来るようにしてください。

幅:

18px

高さ:

18px

状態

以下はサンプルです。用途を定めてデザインしてください。

通常:

<label><input type="checkbox"><span class="inputCheck"></span></label>

文字あり:

テキスト

<label><input type="checkbox"><span class="inputCheck"></span>テキスト</label>

選択:

<label><input type="checkbox" checked><span class="inputCheck"></span></label>

半選択:

<label><input type="checkbox" class="semiCheck" checked><span class="inputCheck"></span></label>

エラー:

<label><input type="checkbox" class="is-error"><span class="inputCheck"></span></label>

非アクティブ:

<label"><input type="checkbox" disabled><span class="inputCheck"></span></label>

タグ仕様

チェックボックスに特殊な装飾を施したいため、INPUT[CHECKBOX]は CSS で非表示 (デフォルト装飾と透過を0)にして、SPANを使い疑似的にチェックボックスを再現しています。これにより、TABキーでもフォーカス可能になります。また、チェックマークはブラウザごとに差異が出ないようにアイコン（SVG画像）を使用しています。