0

[SOLVED] What is the issue with ':valid' selector here?

After entering text into username/password field when focus shifts, labels overlap the entered text. What I want is, when the input field is not empty labels should not move down. See line no. 74 My code: https://code.sololearn.com/WtCVVw1YbUQW

13th Aug 2021, 2:47 PM
Peter Parker
Peter Parker - avatar
6 Answers
+ 2
Peter Parker use required since u are using :valid u should use required too else :valid will not work <input type="password" required> https://code.sololearn.com/WSjM1m6Kd2Rj/?ref=app
13th Aug 2021, 4:46 PM
Pariket Thakur
Pariket Thakur - avatar
+ 1
U have forget to use comma ✅ .inputBox input:focus ~ label, .inputBox input:valid ~ label ❌ .inputBox input:focus ~ label .inputBox input:valid ~ label
13th Aug 2021, 2:59 PM
Pariket Thakur
Pariket Thakur - avatar
0
.box .inputBox input[type=text]:focus ~ label, .box .inputBox input[type=password]:valid ~ label { /* your code */ }
13th Aug 2021, 3:07 PM
Pariket Thakur
Pariket Thakur - avatar
0
HrCoder tried both, nothing happened
13th Aug 2021, 3:23 PM
Peter Parker
Peter Parker - avatar
0
I just don't see anything overlapping .
13th Aug 2021, 4:13 PM
Abhay
Abhay - avatar
0
Thanks HrCoder 😊
13th Aug 2021, 5:33 PM
Peter Parker
Peter Parker - avatar