質問編集履歴
4
質問内容に追記を加えました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -2,9 +2,25 @@
|
|
2
2
|
|
3
3
|
|
4
4
|
|
5
|
+
wordpress ContactForm7 承認確認ボタンに疑似要素:afterが表示されなくて困っています。
|
6
|
+
|
7
|
+
|
8
|
+
|
5
|
-
|
9
|
+
問い合わせフォームをContactForm7で作成中です。
|
6
|
-
|
10
|
+
|
7
|
-
|
11
|
+
承認確認ボタンに疑似要素:afterで作成したチェックマークがブラウザに表示されません。
|
12
|
+
|
13
|
+
|
14
|
+
|
15
|
+
チェックを入れないと、問い合わせを送信できないようにしております。
|
16
|
+
|
17
|
+
承認確認ボタンにチェックは表示されませんが、承認確認ボタンをクリックしないと問い合わせを送信できないので、承認確認ボタンは機能しているようです。
|
18
|
+
|
19
|
+
|
20
|
+
|
21
|
+
ではなぜ疑似要素:afterで作成したチェックマークがブラウザに表示されないのか、どうしても分かりません。
|
22
|
+
|
23
|
+
|
8
24
|
|
9
25
|
|
10
26
|
|
@@ -160,7 +176,53 @@
|
|
160
176
|
|
161
177
|
|
162
178
|
|
179
|
+
|
180
|
+
|
181
|
+
```HTML
|
182
|
+
|
183
|
+
|
184
|
+
|
185
|
+
<span class="checkbox-parts">同意する</span>
|
186
|
+
|
187
|
+
```
|
188
|
+
|
189
|
+
|
190
|
+
|
191
|
+
を
|
192
|
+
|
193
|
+
|
194
|
+
|
195
|
+
```html
|
196
|
+
|
197
|
+
<input type="checkbox" name="acceptance-413" value="1" aria-invalid="false"
|
198
|
+
|
199
|
+
class="checkbox-input">
|
200
|
+
|
201
|
+
```
|
202
|
+
|
203
|
+
|
204
|
+
|
205
|
+
の直下に置ければ:afterが表示される(意図したデザインを実現できる)ことは分かりました。
|
206
|
+
|
207
|
+
|
208
|
+
|
209
|
+
しかし、ContactForm7で出力されたspanタグ
|
210
|
+
|
211
|
+
```html
|
212
|
+
|
213
|
+
<span class="wpcf7-list-item-label">
|
214
|
+
|
215
|
+
```
|
216
|
+
|
217
|
+
|
218
|
+
|
219
|
+
があるので、<input>の直下にできません。
|
220
|
+
|
163
|
-
|
221
|
+
<span class="wpcf7-list-item-label">に:before :afterを指定しても<input>の直下とはならないために:afterが表示されません。。。。
|
222
|
+
|
223
|
+
|
224
|
+
|
225
|
+
|
164
226
|
|
165
227
|
|
166
228
|
|
3
質問内容に修正を加えました。
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
wordpress Contact Form7の承認確認ボタンに
|
1
|
+
wordpress Contact Form7の承認確認ボタンに疑似要素:afterが効かない
|
test
CHANGED
@@ -156,7 +156,7 @@
|
|
156
156
|
|
157
157
|
![イメージ説明](a08a413dc2cdaf36e919fde2e06a528b.gif)
|
158
158
|
|
159
|
-
ContactForm7で承認確認ボタンを設置後のhtmlにもcssは当たっているのですが、spanタグで作成したチェックボックスにチェックが入りません。
|
159
|
+
ContactForm7で承認確認ボタンを設置後のhtmlにもcssは当たっているのですが、spanタグで.contactForm .checkbox-parts:after作成したチェックボックスにチェックが入りません。 (デベロッパーツールではcssが当たっているようです。)
|
160
160
|
|
161
161
|
|
162
162
|
|
2
説明に追記を入れました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -146,7 +146,7 @@
|
|
146
146
|
|
147
147
|
|
148
148
|
|
149
|
-
wordpress管理画面、ContactForm7の画面では以下のようにしております。
|
149
|
+
wordpress管理画面、ContactForm7の設定画面では以下のようにしております。
|
150
150
|
|
151
151
|
![イメージ説明](7dc5003b893e3c816fb1992ac16e1874.png)
|
152
152
|
|
1
説明を追記しました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -146,6 +146,12 @@
|
|
146
146
|
|
147
147
|
|
148
148
|
|
149
|
+
wordpress管理画面、ContactForm7の画面では以下のようにしております。
|
150
|
+
|
151
|
+
![イメージ説明](7dc5003b893e3c816fb1992ac16e1874.png)
|
152
|
+
|
153
|
+
|
154
|
+
|
149
155
|
結果は以下です。
|
150
156
|
|
151
157
|
![イメージ説明](a08a413dc2cdaf36e919fde2e06a528b.gif)
|