質問編集履歴
2
編集結果の画像を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -72,3 +72,4 @@
|
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
```
|
|
75
|
+
|
1
コードの追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,7 +2,73 @@
|
|
|
2
2
|
作成時に、reset.cssとしてdestyle.cssを適用させてしまっていたためか、
|
|
3
3
|
WordpressのプラグインでContact form7を使用したときに、枠線が出なくなってしまいました。
|
|
4
4
|
検証ツールで、枠線に該当しそうなHTMLを探して追加CSSでborderを書いてみたのですが、ラジオボタンにまで枠線がつくなど、おかしくなってしまいました。
|
|
5
|
+
ラジオボタンの部分は、デフォルトのように、丸い枠線で、チェックを入れられるようなboxにしたいです。
|
|
5
6
|
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
HTML
|
|
11
|
+
```<div class="wpcf7 js" id="wpcf7-f55-p9-o1" lang="ja" dir="ltr" data-wpcf7-id="55">
|
|
12
|
+
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div>
|
|
13
|
+
<form action="/contact/#wpcf7-f55-p9-o1" method="post" class="wpcf7-form init" aria-label="コンタクトフォーム" novalidate="novalidate" data-status="init">
|
|
14
|
+
<div style="display: none;">
|
|
15
|
+
<input type="hidden" name="_wpcf7" value="55">
|
|
16
|
+
<input type="hidden" name="_wpcf7_version" value="6.0.4">
|
|
17
|
+
<input type="hidden" name="_wpcf7_locale" value="ja">
|
|
18
|
+
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f55-p9-o1">
|
|
19
|
+
<input type="hidden" name="_wpcf7_container_post" value="9">
|
|
20
|
+
<input type="hidden" name="_wpcf7_posted_data_hash" value="">
|
|
21
|
+
</div>
|
|
22
|
+
<p><label>お名前（必須）<br>
|
|
23
|
+
<span class="wpcf7-form-control-wrap" data-name="text-355"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required box" autocomplete="name" aria-required="true" aria-invalid="false" value="" type="text" name="text-355"></span><br>
|
|
24
|
+
</label>
|
|
25
|
+
</p>
|
|
26
|
+
<p><label>ご年齢<br>
|
|
27
|
+
<span class="wpcf7-form-control-wrap" data-name="number-710"><input class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number box" aria-invalid="false" value="" type="number" name="number-710"></span><br>
|
|
28
|
+
</label>
|
|
29
|
+
</p>
|
|
30
|
+
<p><label>メールアドレス（必須）<br>
|
|
31
|
+
<span class="wpcf7-form-control-wrap" data-name="email-571"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email box" aria-required="true" aria-invalid="false" value="" type="email" name="email-571"></span><br>
|
|
32
|
+
</label>
|
|
33
|
+
</p>
|
|
34
|
+
<p><label>お電話番号<br>
|
|
35
|
+
<span class="wpcf7-form-control-wrap" data-name="tel-649"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel box" aria-invalid="false" value="" type="tel" name="tel-649"></span><br>
|
|
36
|
+
</label>
|
|
37
|
+
</p>
|
|
38
|
+
<p><label>ご希望の返信方法（必須）</label>
|
|
39
|
+
</p>
|
|
40
|
+
<p><span class="wpcf7-form-control-wrap" data-name="radio-39"><span class="wpcf7-form-control wpcf7-radio box"><span class="wpcf7-list-item first"><label><input type="radio" name="radio-39" value="メール"><span class="wpcf7-list-item-label">メール</span></label></span><span class="wpcf7-list-item last"><label><input type="radio" name="radio-39" value="お電話"><span class="wpcf7-list-item-label">お電話</span></label></span></span></span>
|
|
41
|
+
</p>
|
|
42
|
+
<p><label>お問い合わせ内容（必須）</label><br>
|
|
43
|
+
<span class="wpcf7-form-control-wrap" data-name="textarea-388"><textarea cols="40" rows="10" maxlength="2000" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required box" aria-required="true" aria-invalid="false" name="textarea-388"></textarea></span>
|
|
44
|
+
</p>
|
|
45
|
+
<p><input class="wpcf7-form-control wpcf7-submit has-spinner" type="submit" value="送信"><span class="wpcf7-spinner"></span>
|
|
46
|
+
</p><div class="wpcf7-response-output" aria-hidden="true"></div>
|
|
47
|
+
</form>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
CSS
|
|
53
|
+
```wpcf7-form-control-wrap ｛
|
|
54
|
+
border:1px solid #78d8d9;
|
|
55
|
+
}
|
|
56
|
+
input[type="submit"] {
|
|
57
|
+
appearance: none;
|
|
58
|
+
-webkit-appearance: none;
|
|
59
|
+
-moz-appearance: none;
|
|
60
|
+
font-size: 20px;
|
|
61
|
+
font-weight: bold;
|
|
62
|
+
width: 200px;
|
|
63
|
+
padding: 10px;
|
|
64
|
+
border-radius: 10px;
|
|
65
|
+
background-color: #233b6c;
|
|
66
|
+
border: none;
|
|
67
|
+
color: #fff;
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
}
|
|
70
|
+
span.wpcf7-spinner {
|
|
71
|
+
display: none;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
```
|