Wordpress ContactForm7 iphoneからラジオボタンの選択ができない

Question

お世話になります。

WordpressのContact Form 7にて登録フォームを作成しています。

PCからはラジオボタンのチェックができますが、
iphoneからはラジオボタンのチェックの表示が不可となります。

制作中のフォーム
http://eyemark.wp-x.jp/contact/

一番上のラジオボタンにおいて上記現象となります。

Contact Form 7 に記載したソース

<table>
<tr>
<td class="fmttl rqd">題名</td>
<td class="ipt">[radio your-title id:your-title class:your-title class:form1 default:1 "お問い合わせ" "体験入隊希望" "正式入隊希望"]</td>
</tr>

～

css

.wpcf7-radio input[type="radio"] {
	width: 18px;
	height: 18px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 18px;
	background: transparent;
	opacity: 0.5;
	cursor: pointer;
}

.wpcf7-radio input[type="radio"]:checked:after {
	background: #ffe6be;
	border: 2px solid #ff9900;
	opacity: 1;
}

span .wpcf7-list-item {
	display: block ;
}

=============================================
WordPress : 4.5.3
Contact Form 7 : 4.5
iphone6

iphone（スマホ）からもチェックが出来る方法をご教授頂けないでしょうか。

お手数ですが、よろしくお願いいたします。

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

Answer 1

ラジオボタン（とそのテキスト）を label要素で囲ってみてはいかがでしょう。

【入力フィールドにラベルを付けられますか? | Contact Form 7 [日本語]】
http://contactform7.com/ja/faq/can-i-add-text-labels-to-input-fields/

[radio your-title use_label_element id:your-title class:your-title class:form1 default:1 "お問い合わせ" "体験入隊希望" "正式入隊希望"]

Comments

[Dvtv]

ご回答ありがとうございます。
labelを追加したことで
文字（text）の一覧も指定ができるようになりました。
ですが、ラジオボタンの表示がされない現象は今の所、
解決できておりません。

[kei344]

下記を削除すれば問題なくなります。
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;

多分標準のスタイルを変えたいのでしょう。それをすると表示が消えるだけなので、ラジオボタンがチェックされたときのスタイルの設定も併せて行う必要があります。

[Dvtv]

返信おそくなりました。ご回答ありがとうございます。
ボタンのチェックが表示されるようになりました。スタイルの設定は別途行います。