cssだけでcheckboxやradioのデザインを変更

CSS3の隣接セレクタ、属性セレクタ、擬似セレクタの合わせ技で

input[type=checkbox]:checked + label

の書式を駆使すると、スタイルシートだけでcheckboxやradioのデザインを変更できます。

CSS3のセレクタに対応していないIE8以下では
通常のラジオボタンやチェックボックスが表示されます。

radio 1
radio 2

checkbox

htmlの構成は
inputの次にlabelを配置し、idとforで連動させるようにしておきます。

<div class="sample">
	<div>
		<input type="radio" name="sample-radio" checked="checked" id="radio-1" /><label for="radio-1">radio 1</label>
		<input type="radio" name="sample-radio" id="radio-2" /><label for="radio-2">radio 2</label>
	</div>
	<div>
		<input type="checkbox" name="sample-checkbox" checked="checked" id="checkbox" /><label for="checkbox">checkbox</label>
	</div>
</div>

cssは
input[type=checkbox] の属性セレクタでチェックボックスやラジオボタンを取得し
CSS3に対応しているブラウザでは、display: none; でinput要素を隠します。

+ label の隣接セレクタで、inputの隣にあるlabelを取得し
labelのほうへ任意のチェックボックスやラジオボタンの見た目を設定します。
サンプルは、擬似要素::before、::afterをつかって幾何学的なチェックマークや丸を作っていますが
画像やsvgをbackground-imageに設定するやり方も取り入れれば、もっと柔軟に見た目をカスタマイズできます。

input[type=checkbox]:checked の擬似クラスで、選択中の状態を取得し
その隣にあるlabelへ、選択状態のチェックボックスやラジオボタンの見た目を設定しています。

css3に対応していないブラウザでは、元のinput要素がそのまま表示されるよう
labelにチェックボックスやラジオボタンの見た目を当てている部分を
@media (min-width: 1px) {} で囲っています。
IE8は、メディアクエリのこの書式に対応していないのを逆に利用しています。

.sample {
	padding: 6px;
}
.sample input[type=radio],
.sample input[type=checkbox] {
	display: inline-block;
	margin-right: 6px;
}
.sample input[type=radio] + label,
.sample input[type=checkbox] + label {
	position: relative;
	
	display: inline-block;
	margin-right: 12px;
	
	font-size: 14px;
	line-height: 30px;
	
	cursor: pointer;
}

@media (min-width: 1px) {
	.sample input[type=radio],
	.sample input[type=checkbox] {
		display: none;
		margin: 0;
	}
	.sample input[type=radio] + label,
	.sample input[type=checkbox] + label {
		padding: 0 0 0 24px;
	}
	.sample input[type=radio] + label::before,
	.sample input[type=checkbox] + label::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
		width: 18px;
		height: 18px;
		margin-top: -9px;
		
		background: #FFF;
	}
	.sample input[type=radio] + label::before {
		border: 2px solid #ccc;
		border-radius: 30px;
	}
	.sample input[type=checkbox] + label::before {
		border: 2px solid #ccc;
	}
	.sample input[type=radio]:checked + label::after,
	.sample input[type=checkbox]:checked + label::after {
		content: "";
		position: absolute;
		top: 50%;
		
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
	}
	.sample input[type=radio]:checked + label::after {
		left: 5px;
		
		width: 8px;
		height: 8px;
		margin-top: -4px;
		
		background: #E71063;
		border-radius: 8px;
	}
	.sample input[type=checkbox]:checked + label::after {
		left: 3px;
		
		width: 16px;
		height: 8px;
		margin-top: -8px;
		
		border-left: 3px solid #E71063;
		border-bottom: 3px solid #E71063;
		
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}

Pocket

Share on Tumblr

関連記事