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:"";
}

コメント

タイトルとURLをコピーしました