【Contact Form 7】ラジオボタンのデザインを変更する方法
Contact Form 7で生成されるラジオボタンは、HTMLのタグ構造を理解しCSSの疑似要素を組み合わせることで簡単にデザインをカスタマイズすることが出来ます。
この記事では、Contact Form 7で生成されるラジオボタンのデザインを変更する方法をご紹介します。
Contact Form 7で生成されるタグ構造の一覧はこちらの記事をご覧下さい。
Contact Form 7で生成されるラジオボタンのタグ構造
Contact Form 7で生成されるラジオボタンのタグ構造は決まっていて、具体的には以下のタグ構造で出力されます。
<span class="wpcf7-form-control-wrap" data-name="field-radio">
<span class="wpcf7-form-control wpcf7-radio">
<span class="wpcf7-list-item first">
<label>
<input type="radio" name="field-radio" value="選択肢1" checked="checked" />
<span class="wpcf7-list-item-label">選択肢1</span>
</label>
</span>
<span class="wpcf7-list-item">
<label>
<input type="radio" name="field-radio" value="選択肢2" />
<span class="wpcf7-list-item-label">選択肢2</span>
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<input type="radio" name="field-radio" value="選択肢3" />
<span class="wpcf7-list-item-label">選択肢3</span>
</label>
</span>
</span>
</span>Contact Form 7で生成されるラジオボタンのデザインをカスタマイズする場合、「個々の項目を label 要素で囲む」のチェックを入れるようにします。
また、「ラベルを前に、チェックボックスを後に配置する」のチェックは入れないようにします。
ラジオボタンのデザインをカスタマイズする
2024年8月時点ではラジオボタンを直接CSSで色を変えたりすることは出来ません。
そのため、疑似要素を使って擬似的にラジオボタンを生成します。
Contact Form 7のラジオボタンのデザインをカスタマイズするCSSサンプルはこちら。
.wpcf7-list-item {
display: block;
line-height: 1;
}
.wpcf7-list-item + .wpcf7-list-item {
margin-top: 8px;
}
input[type="radio"] {
display: none;
}
.wpcf7-list-item-label {
position: relative;
height: 20px;
line-height: 20px;
padding-left: 25px;
display: inline-block;
}
.wpcf7-list-item-label::before {
content: "";
display: block;
width: 20px;
height: 20px;
border: 1px solid;
border-radius: 50%;
background: #fff;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
}
input[type="radio"]:checked + .wpcf7-list-item-label::after {
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #3d8582;
position: absolute;
left: 5px;
top: 5px;
}実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
コードの解説
Contact Form 7の設定画面でラジオボタンを生成する際、「個々の項目を label 要素で囲む」のチェックを入れることでラジオボタンは以下のようなタグ構造で出力されます。
<span class="wpcf7-list-item first">
<label>
<input type="radio" name="field-radio" value="選択肢1" checked="checked" />
<span class="wpcf7-list-item-label">選択肢1</span>
</label>
</span>ラジオボタンをlabelタグで囲うのがポイントです。labelタグで囲うことでラジオボタンが非表示の場合でもチェックしたりチェックを外したりすることが出来るようになります。
そして、ラジオボタン自体はCSSでデザイン変更することが出来ないので非表示にしておきます。
input[type="radio"] {
display: none;
}続いて、疑似要素の::beforeでラジオボタンを作成します。
.wpcf7-list-item-label::before {
content: "";
display: block;
width: 20px;
height: 20px;
border: 1px solid;
border-radius: 50%;
background: #fff;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
}さらに、疑似要素の::afterを使い、選択されているラジオボタンのチェックマークを作ります。
input[type="radio"]:checked + .wpcf7-list-item-label::after {
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #3d8582;
position: absolute;
left: 5px;
top: 5px;
}input[type="radio"]:checked + .wpcf7-list-item-label::after { ... }このようにすることで選択されたラジオボタンの次のclass="wpcf7-list-item-label"だけに指定することが出来ます。
最後にもう一度実相サンプルを見てみましょう。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
CSSの指定次第ではおしゃれなラジオボタンに変更することも可能です。
いかがでしたか？
Contact Form 7で生成されるラジオボタンはHTMLタグの構造は決まっていますが、それに合わせて疑似要素を組み合わせてCSSを指定することで簡単にデザインを変更出来ます。
デフォルトのラジオボタンだと、どうしても機械的な印象を受けてしまいますが、この記事を参考にして、デザインを簡単に変更してみて下さい。
