ラジオボタンとチェックボックスをCSSで装飾する際のポイント

ラジオボタンとチェックボックスをCSSで装飾する際のポイント

CodePenなどで見つけたオサレなスタイルが、プラグインの関係でそののまでは直接ワードプレスに組み込めない時のポイント。
エントリーフォームのUXを高めてEFOを最適化するには必須スキルです。

2種類のlabelタグの使い方

分離型

<input id="radio01" type="radio"><label for="radio01">ラジオボタン01</label>
<input id="checkbox01" type="checkbox"><label for="radio01">チェックボックス01</label>

内包型

<label><input type="radio">ラジオボタン01</label>
<label><input type="checkbox">チェックボックス01</label>

装飾のポイント

下準備として、内包型の場合はテキストをspanで囲います。
WordPressで人気の、MW WP FormやContact Form7は、この型になります。
Contact Form7の場合、「個々の項目を label 要素で囲む」設定にします。

<label><input type="radio"><span>ラジオボタン01</span></label>
<label><input type="checkbox"><span>チェックボックス01</span></label>

分離型でこのようなコードの場合、

input[type="radio"] + label {/* BlockA */}
input[type="radio"] + label::before {/* BlockB */}
input[type="radio"]:checked + label::after {/* BlockC */}

内包型ではこのように読み変えます。

input[type="radio"] + span {/* BlockA */}
input[type="radio"] + span::before {/* BlockB */}
input[type="radio"]:checked + span::after {/* BlockC */}

それぞれのBlockに同じ内容が入ります。

おまけでサンプルCSS。
CSSはオサレなのがたくさん溢れてるので割愛。

/* 共通 */
input[type="radio"],
input[type="checkbox"] {
	display: none;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
	display: inline-block;
	position: relative;
	margin-left: 10px;
	padding: 10px 20px;
	border-radius: 2px;
	color: #000;
	font-size: 1.5rem;
	text-align: center;
	line-height: 1;
	cursor: pointer;
}
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
	position: absolute;
	top: 50%;
	left: -10px;
	width: 20px;
	height: 20px;
	content: "";
	margin-top: -10px;
	border: 2px solid #000;
	background: #fff;
}

input[type="radio"]:checked + label::after,
input[type="checkbox"]:checked + label::after {
	position: absolute;
	content: "";
	top: 50%;
	left: -4px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #1a1a1a;
}

/* ラジオボタン */
input[type="radio"] + label::before,
input[type="radio"]:checked + label::after {
	border-radius: 50%;
}

まとめ

labelspan または input[type="radio"] + span に読み替えると覚えておきましょう。