CSS | チェックボックスのサイズと位置を調節する

2021-02-04CSS フォーム,CSS

CSSでフォームパーツのチェックボックスのサイズと位置を調節するサンプルです。

チェックボックスやラジオボタンはデフォルトの表示が小さい場合が多い事もあり、綺麗にデザインされたCSSが人気ですが、とりあえず大きさを変更して位置を調節するだけでも見た目は随分違ってきます。

See the Pen CSS | Adjust the size and position of the checkbox by yochans (@yochans) on CodePen.

チェックボックスのサイズと位置を調節する

チェックボックスのサイズを変更するには、transformのscale()で調節します。

scale()は拡縮率で、0以上の値を指定可能で大きいほど要素の表示は大きくなります。

また、チェックボックスのサイズを拡大した事により、ラベルのテキストとの位置を調節するのにmarginを利用します。

<div class="container">
	<p><input type="checkbox" id="apple" name="">
	<label for="apple">Apple</label></p>
	<p><input type="checkbox" id="banana" name="">
	<label for="banana">Banana</label></p>
	<p><input type="checkbox" id="pine" name="">
	<label for="pine">Pine</label></p>
</div>

input[type=checkbox] {
	transform: scale(2);
	margin: 0 6px 0 0;
}

marginの方向を別々に指定する場合の順番は上方向、右方向、下方向、左方向です。