cssだけでチェックボックスとラジオボタンのデザインを変えたい

デザインによってデフォルトのチェックボックスやラジオボタンのデザインを変えたいということもあると思います。

デフォルトのチェックボックスやラジオボタンは閲覧するブラウザによっても異なります。

どのブラウザでも同じデザインで見せたいというときにはcssを使ってカスタマイズさせることができます。

今回はチェックボックスとラジオボタンをカスタマイズする方法を教えます。

チェックボックスのデザインを変える

html

<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox">チェックボックス</label>

チェックボックスのデザインを変えるときは<input>タグ、<label>タグの順番で配置するようにしましょう。

css

/* inputを非表示 */
input[type=checkbox]{display:none;}

/* チェックされる前のデザイン */
input[type=checkbox] + label{
	padding:0 0 0 30px;
	position:relative;
	cursor: pointer;
}

input[type=checkbox] + label::before{
	position:absolute;
	top:0;
	left:0;
	width:18px;
	height:18px;
	border:solid 2px #eee;
	content:"";
}

/* チェックボックスにチェックが入ったとき */
input[type=checkbox]:checked + label::after{
	position:absolute;
	top: 13px;
	left: 5px;
	width: 10px;
	height: 6px;
	margin-top: -8px;
	border-left: 3px solid #555;
	border-bottom: 3px solid #555;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	content:"";
}

ラジオボタンのデザインを変える

html

<input type="radio" name="radio" class="radio" id="radio01">
<label for="radio01">ラジオボタン</label>
<input type="radio" name="radio" class="radio" id="radio02">
<label for="radio02">ラジオボタン</label>  

css

/* inputを非表示 */
input[type=radio]{display:none;}

/* ラジオボタンが選択される前のデザイン */
input[type=radio] + label{
	padding:0 0 0 30px;
	position:relative;
	cursor: pointer;
}

input[type=radio] + label::before{
	position:absolute;
	top:0;
	left:0;
	width:18px;
	height:18px;
	border:solid 2px #eee;
	border-radius:50%;
	content:"";
}

/* ラジオボタンにチェックが入ったとき */
input[type=radio]:checked + label::after{
	position:absolute;
	top:50%;
	left: 6px;
	margin: -6px 0 0 0;
	width: 10px;
	height: 10px;
	border-radius:50%;
	background:#555;;
	content:"";
}