March 4, 2018

CSS Checkboxesはカスタマイズ可能で使いやすいCSSチェックボックス。

コードにスタイルシートを追加する

<link rel="stylesheet" type="text/css" href="css-checkboxes.css">

コードに追加します。

<label class=“checkbox-container”>
	<input type=“checkbox”>
	<span class=“checkbox shape-size color”></span>
</label>

24ピクセルの高さと幅の青い正方形のチェックボックスを追加する場合

<label class=“checkbox-container”>
	<input type=“checkbox”>
	<span class=“checkbox square-24 blue”></span>
</label>

チェックボックスの横にテキストを追加するには、label開始タグの後ろにテキストを書き込む

<label class=“checkbox-container”>Example text
	<input type=“checkbox”>
	<span class=“checkbox shape-size color”></span>
</label>