CODEWITHSUNDEEP
htmlcss
yalpsid
yalpsid

Reputation: 235

input:valid not working - not focusing yet, but label is already on top

I'm trying to avoid label from going back to its initial position (if unfocus) whenever there is some text in the input field, here it's working fine.

But in my other code, it's not working, I'm not focusing yet, but label is already on top:

input:focus + label > span,
input:valid + label > span {
    font-size: 11px;
    padding-bottom: 20px;
    top: -20px;
}

Upvotes: 1

Views: 1505

Answers (1)

Chris Li
Chris Li

Reputation: 2671

Here's why, you need attribute required in the input
like this <input type="text" name="name" class="input-field" id="user" required/>
using :valid on input will select input that is validated, if you have required on the input but it's empty, it's not validated and the style won't take effect.
read more about :valid here https://developer.mozilla.org/en-US/docs/Web/CSS/:valid

Upvotes: 3

Related Questions