Contact Form 7のラジオボタンカスタム
653
この記事を書いている人
先日ラジオボタンのカスタムについての記事をUPしました。
私はWPサイトのお問い合わせフォームには、プラグインContact Form 7を利用することが多いです。
今回はContact Form 7の場合のCSSコードを紹介したいと思います。
コードの紹介
プラグインを利用すると、自動でHTMLが作成されますよね。
自動で用意されているclassを利用します。
HTML
Contact Form 7のラジオボタンで作成されるHTMLをフォーマットしたものがこちらです。
<p>
<span class="wpcf7-form-control-wrap" data-name="radio-title">
<span class="wpcf7-form-control wpcf7-radio" id="title-option">
<span class="wpcf7-list-item first">
<label>
<input type="radio" name="radio-title" value="ホームページ制作について" checked="checked">
<span class="wpcf7-list-item-label">ホームページ制作について</span>
</label>
</span>
<span class="wpcf7-list-item">
<label>
<input type="radio" name="radio-title" value="ブログ制作について">
<span class="wpcf7-list-item-label">ブログ制作について</span>
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<input type="radio" name="radio-title" value="お問い合わせ・ご相談">
<span class="wpcf7-list-item-label">お問い合わせ・ご相談</span>
</label>
</span>
</span>
</span>
</p>
このコードから、.wpcf7-radio label
を使用してCSSを追加します。
CSS
wpcf7-radio input
で元々のラジオボタンを見えないようにします。
コードの解説についてはこちらをご覧ください。
.wpcf7-radio label {
position: relative;
cursor: pointer;
padding: 5px 5px 5px 33px;
display: block;
}
.wpcf7-radio label::before,
.wpcf7-radio label::after {
content: "";
display: block;
border-radius: 50%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.wpcf7-radio label::before {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 50%;
width: 20px;
height: 20px;
left: 5px;
}
.wpcf7-radio label::after {
border-radius: 50%;
background-image: url(flower-purple.png);
background-size: 100%;
background-position: no-repeat;
opacity: 0;
width: 29px;
height: 29px;
left: 3px;
}
.wpcf7-radio .wpcf7-list-item label:has( input:checked)::after {
opacity: 1;
}
.wpcf7-radio input[type="radio"] {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
チェック時の状態を画像ではなく円にしたい場合は、.wpcf7-radio label::after
の中を編集してください。
参考コードはこちらにあります→チェック時の画像を変更する場合
HTMLが異なる場合
HTMLが紹介したものと異なる場合も、理屈がわかっていれば簡単です。
セレクタの書き換えでうまくカスタムできると思います。
- 元々のボタンを非表示
- before&afterで、チェック前、チェック後のボタンを作成
- after(チェック後)をopacity: 0
- チェックするとafterを表示(opacity: 1)
classに注意して指定してあげてください。
いいなと思ったら
TAPしてね♡↓
フォームのラジオボタンをCSSカスタムで可愛くする 画像を横から徐々に表示するCSSアニメーション
コメントは承認後に表示されます。