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

Question

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

Answer 1

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

Answer 2

U have forget to use comma
✅
.inputBox input:focus ~ label,
.inputBox input:valid ~ label

❌
.inputBox input:focus ~ label
.inputBox input:valid ~ label

Answer 3

.box .inputBox input[type=text]:focus ~ label,
.box .inputBox input[type=password]:valid ~ label
{
/* your code */
}

Answer 4

HrCoder tried both, nothing happened

Answer 5

I just don't see anything overlapping .

Answer 6

Thanks HrCoder 😊