下記の赤枠のようなコードが出来上がりますが、ただ、他の項目のようにこれだけではうまくいきません。デザインが崩れてしまいました。関連するクラスが多く、Contact Form7特有のクラスがついているため、CSSを変更しなくていけないようです。
HTMLで出力したクラス名を調べて、コツコツ修正していきます。
例として、下記のような修正があります。
/* ラジオボタン全体を囲むdivのスタイリング */
span.wpcf7-form-control-wrap {
margin-bottom: 20px;/* ラジオボタングループ間の余白 */
}
/* ラジオボタンのラベル全体のスタイル */
span.wpcf7-list-item { display: block; /* ラジオボタンを縦に並べたい時*/
margin-bottom: 10px; /* 各ラジオボタン項目間のマージン */
}
/* ラジオボタンのラベルテキストのスタイル */
span.wpcf7-list-item-label {
color: #333; /* ラベルテキストの色 */
font-size: 16px; /* フォントサイズ */
cursor: pointer; /* カーソルをポインターに変更 */
}
/* ラジオボタン自体のスタイル（カスタムスタイルを適用する場合） */
input[type=”radio”] {
margin-right: 10px; /* ラジオボタンとラベルの間隔 */
cursor: pointer; /* カーソルをポインターに変更 */
}
上記の他にラジオボタンとチェックボックスのカスタムスタイルを作成する場合は疑似要素を使って、行います。同じことをやろうとするとまた、何時間もかかりそうです。
フォームの入力が終わったら、保存ボタンを忘れずに押してください。
