質問編集履歴

4

質問内容に追記を加えました。

2021/01/17 04:29

投稿

Fukusuke0604
Fukusuke0604

スコア554

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
- 問い合わせフォームの作成にWordpressプラグイン Contact Form7を利用しました
9
+ 問い合わせフォームContactForm7で作成中です
6
-
10
+
7
- しかし、元のhtmlデータのように承認確認ボタンがインできず困ってい
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

質問内容に修正を加えました。

2021/01/17 04:29

投稿

Fukusuke0604
Fukusuke0604

スコア554

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

説明に追記を入れました。

2021/01/17 03:57

投稿

Fukusuke0604
Fukusuke0604

スコア554

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

説明を追記しました。

2021/01/16 14:04

投稿

Fukusuke0604
Fukusuke0604

スコア554

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)