【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-checkbox">
<span class="wpcf7-form-control wpcf7-checkbox">
<span class="wpcf7-list-item first">
<label>
<input type="checkbox" name="field-checkbox[]" value="選択肢1" />
<span class="wpcf7-list-item-label">選択肢1</span>
</label>
</span>
<span class="wpcf7-list-item">
<label>
<input type="checkbox" name="field-checkbox[]" value="選択肢2" />
<span class="wpcf7-list-item-label">選択肢2</span>
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<input type="checkbox" name="field-checkbox[]" 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="checkbox"] {
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: 2px solid;
background: #fff;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
content: "";
display: block;
width: 8px;
height: 6px;
border-top: 3px solid #3d8582;
border-right: 3px solid #3d8582;
transform: rotate(135deg);
position: absolute;
left: 5px;
top: 4px;
}実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
コードの解説
Contact Form 7の設定画面でチェックボックスを生成する際、「個々の項目をlabel要素で囲む」のチェックを入れることでチェックボックスは以下のようなタグ構造で出力されます。
<span class="wpcf7-list-item first">
<label>
<input type="checkbox" name="field-checkbox[]" value="選択肢1" />
<span class="wpcf7-list-item-label">選択肢1</span>
</label>
</span>チェックボックスをlabelタグで囲うのがポイントです。
そして、チェックボックス自体はCSSでデザイン変更することが出来ないので非表示にしておきます。
input[type="checkbox"] {
display: none;
}続いて、疑似要素の::beforeでチェックボックスを作成します。
.wpcf7-list-item-label::before {
content: "";
display: block;
width: 20px;
height: 20px;
border: 2px solid;
background: #fff;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
}さらに、疑似要素の::afterを使い、選択されているチェックボックスのチェックマークを作ります。
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
content: "";
display: block;
width: 8px;
height: 6px;
border-top: 3px solid #3d8582;
border-right: 3px solid #3d8582;
transform: rotate(135deg);
position: absolute;
left: 5px;
top: 4px;
}input[type="checkbox"]: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を指定することで簡単にデザインを変更出来ます。
デフォルトのチェックボックスだと、どうしても機械的な印象を受けてしまいますが、この記事を参考にして、デザインを簡単に変更してみて下さい。
なお、Contact Form 7で生成されるラジオボタンのデザインをカスタマイズする方法はこちらの記事でご紹介しています。
