CSSだけでチェックボックスとラジオボタンをカスタマイズ！

: てっちゃん

2022.02.03

チェックボックスとラジオボタンのデフォルトのままじゃイメージが合わない・・ということありますよね！
そんな時にカンタンにデザインをカスタマイズしちゃいましょ～

今回は3タイプを用意しました！
とってもカンタンにできるのでやってみてください！

シンプルパターン1（typeA）

チェックボックスとラジオボタン：シンプルパターン1

HTML

<section class="base">
	<div><!-- チェックボックス -->
		<h3>チェックボックス</h3>
		<label class="typeA-checkbox">不思議の国のアリス
			<input type="checkbox" checked="checked">
			<div class="indicator"></div>
		</label>
		<label class="typeA-checkbox">坊ちゃん
			<input type="checkbox">
			<div class="indicator"></div>
		</label>
		<label class="typeA-checkbox">徒然草
			<input type="checkbox">
			<div class="indicator"></div>
		</label>
		<label class="typeA-checkbox">Disabled & checked
			<input type="checkbox" disabled="disabled" checked="checked">
			<div class="indicator"></div>
		</label>
	</div>
	<div><!-- ラジオボタン -->
		<h3>ラジオボタン</h3>
		<label class="typeA-radio">不思議の国のアリス
			<input type="radio" name="radio" checked="checked">
			<div class="indicator"></div>
		</label>
		<label class="typeA-radio">坊ちゃん
			<input type="radio" name="radio">
			<div class="indicator"></div>
		</label>
		<label class="typeA-radio">徒然草
			<input type="radio" name="radio">
			<div class="indicator"></div>
		</label>
		<label class="typeA-radio">Disabled & checked
			<input type="radio" name="radio2" disabled="disabled" checked="checked">
			<div class="indicator"></div>
		</label>
	</div>
</section>

CSS

/* == シンプルパターン：typeA == */
#Type-A label{
	margin-bottom:15px;
	padding-left:30px;
	display:block;
	font-size:18px;
	cursor:pointer;
	position:relative;
}
#Type-A input{
	position:absolute;
	z-index:-1;
	opacity:0;
}
#Type-A .indicator{
	width:20px;
	height:20px;
	background:#e6e6e6;
	position:absolute;
	top:2px;
	left:0;
}
#Type-A .typeA-radio .indicator{
	border-radius:50%;
}
#Type-A label:hover input ~ .indicator,
#Type-A label input:focus ~ .indicator{
	background:#ccc;
}
#Type-A label input:checked ~ .indicator{
	background:rgba(0,154,219,1);
}
#Type-A label:hover input:not([disabled]):checked ~ .indicator{
	background:rgba(0,154,219,.7);
}
#Type-A .typeA-radio input:checked ~ .indicator{
	background: #e87a90;
}
#Type-A .typeA-radio:hover input:not([disabled]):checked ~ .indicator{
	background:rgba(232,122,144,.7);
}
#Type-A label input:disabled ~ .indicator,
#Type-A .typeA-radio input:disabled ~ .indicator{
	background:#e6e6e6;
	opacity:0.6;
	pointer-events:none;
}
#Type-A .indicator::after{
	content:'';
	display:none;
	position:absolute;
}
#Type-A label input:checked ~ .indicator::after{
	display:block;
}
#Type-A .typeA-checkbox .indicator::after{
	width:5px;
	height:8px;
	border:solid #fff;
	border-width:0 2px 2px 0;
	left:8px;
	top:4px;
	transform:rotate(45deg);
}
#Type-A .typeA-checkbox input:disabled ~ .indicator::after{
	border-color:#7b7b7b;
}
#Type-A .typeA-radio .indicator::after{
	width:6px;
	height:6px;
	border-radius:50%;
	background:#fff;
	top:7px;
	left:7px;
}
#Type-A .typeA-radio input:disabled ~ .indicator::after{
	background:#7b7b7b;
}

シンプルパターン2（typeB）

チェックボックスとラジオボタン：シンプルパターン2

デモページ

HTML

<section class="base">
	<div><!-- チェックボックス -->
		<h3>チェックボックス</h3>
		<label class="typeB-checkbox">不思議の国のアリス
			<input type="checkbox" checked="checked">
			<div class="indicator"></div>
		</label>
		<label class="typeB-checkbox">坊ちゃん
			<input type="checkbox">
			<div class="indicator"></div>
		</label>
		<label class="typeB-checkbox">徒然草
			<input type="checkbox">
			<div class="indicator"></div>
		</label>
		<label class="typeB-checkbox">Disabled & checked
			<input type="checkbox" disabled="disabled" checked="checked">
			<div class="indicator"></div>
		</label>
	</div>
	<div><!-- ラジオボタン -->
		<h3>ラジオボタン</h3>
		<label class="typeB-radio">不思議の国のアリス
			<input type="radio" name="radio3" checked="checked">
			<div class="indicator"></div>
		</label>
		<label class="typeB-radio">坊ちゃん
			<input type="radio" name="radio3">
			<div class="indicator"></div>
		</label>
		<label class="typeB-radio">徒然草
			<input type="radio" name="radio3">
			<div class="indicator"></div>
		</label>
		<label class="typeB-radio">Disabled & checked
			<input type="radio" name="radio4" disabled="disabled" checked="checked">
			<div class="indicator"></div>
		</label>
	</div>
</section>

CSS

/* == シンプルパターン：typeB== */
#Type-B label{
	margin-bottom:15px;
	padding-left:30px;
	display:block;
	font-size:18px;
	cursor:pointer;
	position:relative;
}
#Type-B input{
	position:absolute;
	z-index:-1;
	opacity:0;
}
#Type-B .indicator{
	width:20px;
	height:20px;
	border-radius:50%;
	background:#eee;
	position:absolute;
	top:2px;
	left:0;
}
#Type-B label input:disabled ~ .indicator{
	background:#ccc;
	opacity:0.6;
	pointer-events:none;
}
#Type-B .indicator::after{
	content:"";
	width:0;
	height:0;
	display:block;
	border-radius:50%;
	background:#009adb;
	position:absolute;
	top:50%;
	left:50%;
	transition: all .3s;
}
#Type-B label input:checked ~ .indicator::after{
	width:14px;
	height:14px;
	top:3px;
	left:3px;
}
#Type-B .typeB-radio .indicator::after{
	background:#e87a90;
}
#Type-B .typeB-checkbox input:disabled ~ .indicator::after,
#Type-B .typeB-radio input:disabled ~ .indicator::after{
	background:#7b7b7b;
}

スイッチデザイン（typeC）

チェックボックスとラジオボタン：スイッチデザイン

デモページ

HTML

<section class="base">
	<div><!-- チェックボックス -->
		<h3>チェックボックス</h3>
		<label class="typeC-checkbox">不思議の国のアリス
			<input type="checkbox" checked="checked">
			<div class="indicator"></div>
		</label>
		<label class="typeC-checkbox">坊ちゃん
			<input type="checkbox">
			<div class="indicator"></div>
		</label>
		<label class="typeC-checkbox">徒然草
			<input type="checkbox">
			<div class="indicator"></div>
		</label>
		<label class="typeC-checkbox">Disabled & checked
			<input type="checkbox" disabled="disabled" checked="checked">
			<div class="indicator"></div>
		</label>
	</div>
	<div><!-- ラジオボタン -->
		<h3>ラジオボタン</h3>
		<label class="typeC-radio">不思議の国のアリス
			<input type="radio" name="radio5" checked="checked">
			<div class="indicator"></div>
		</label>
		<label class="typeC-radio">坊ちゃん
			<input type="radio" name="radio5">
			<div class="indicator"></div>
		</label>
		<label class="typeC-radio">徒然草
			<input type="radio" name="radio5">
			<div class="indicator"></div>
		</label>
		<label class="typeC-radio">Disabled & checked
			<input type="radio" name="radio6" disabled="disabled" checked="checked">
			<div class="indicator"></div>
		</label>
	</div>
</section>

CSS

/* == スイッチデザイン：typeC == */
#Type-C label{
	margin-bottom:15px;
	padding-left:60px;
	display: flex;
	align-items: center;
	font-size:18px;
	cursor:pointer;
	position:relative;
}
#Type-C input{
	position:absolute;
	z-index:-1;
	opacity:0;
}
#Type-C .indicator{
	width: 44px;
	height: 26px;
	border:4px #eee solid;
	border-radius: 13px;
	background-color: #eee;
	position:absolute;
	top:2px;
	left:0;
}
#Type-C .indicator::after{
	content:"";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ccc;
	position: absolute;
	transition: all .3s;
}
#Type-C label input:checked ~ .indicator::after{
	background: #009adb;
	transform: translateX(100%);
}
#Type-C .typeC-radio input:checked ~ .indicator::after{
	background: #e87a90;
}
#Type-C .typeC-checkbox input:disabled ~ .indicator::after,
#Type-C .typeC-radio input:disabled ~ .indicator::after{
	opacity:.35;
}

いかがでしたか？
この他にもボタンタイプなどもあったり、カスタマイズ方法はたくさんあります。
今回はカンタンにできる一部をご紹介しました！