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%;
}まとめ
label を span または input[type="radio"] + span に読み替えると覚えておきましょう。