invalid input in CSS state/selector

https://codepen.io/JunSu-Ho/pen/KKxLROg
so the effect works when input is valid or empty,
but not when the user put invalid input,
is this can be solved without JS?

the label should be on top if the input is invalid as well, but not when it's empty
it's more clear to see in the codepen link just put some invalid email like abc, the label doesn't react

CodePenJun Su-Ho

KKxLROg

...

Joao•3/31/23, 1:20 AM

The problem is the state which starts off as invalid since an empty string is not a valid email address.

Joao•3/31/23, 1:21 AM

You can however use pseudo element to check if the input's placeholder is being displayed, which only happens when it's empty. Note that you do have to add the attribute on the input, but it can be left blank if you need to.

Joao•3/31/23, 1:21 AM

So then it would look something like this:

Joao•3/31/23, 1:22 AM

For reference: https://zellwk.com/blog/check-empty-input-css/

Checking if an input is empty with CSS | Zell Liew

Is it possible to know if an input is empty with only CSS? I had that question when I tried to make an autocomplete component for Learn JavaScript. Basically, I wanted to: 1. Hide a dropdown if the input is empty 2. Show the dropdown if the input is filled

JJoao The problem is the `:invalid` state which starts off as invalid since an empty s...

JunSu-HoOP•4/4/23, 9:10 AM

that doesn't work at all,
with the label is already up from the start as in case with which is not the goal

JJunSu-Ho that doesn't work at all, with `.inputBox input:not(:placeholder-shown):invalid ...

Joao•4/4/23, 9:17 AM

Could you describe the goal more clearly, then? I understood that label in red means invalid.

JJoao Could you describe the goal more clearly, then? I understood that label in red m...

JunSu-HoOP•4/4/23, 9:26 AM

the goal is that when the input is empty the label should be in a place of placeholder (inside of an input, but technically I guess the label stacks on top of an input), and whenever input is not empty whether it's valid or invalid, label should go on top the input (outside of an input space) so that there is no overlapping with input's content text ( the input from the user)

so in my case the label does the job of placeholder when an input is empty

Joao•4/4/23, 9:33 AM

I don't see the label ever being inside or "on top" of the input, just below or above

JunSu-HoOP•4/4/23, 9:39 AM

empty input

JunSu-HoOP•4/4/23, 9:40 AM

valid input

JunSu-HoOP•4/4/23, 9:42 AM

invalid input,
the effect should be the same as valid but it's not, that's the whole problem

JunSu-HoOP•4/4/23, 9:45 AM

https://codepen.io/JunSu-Ho/pen/KKxLROg
that's the code of that

CodePenJun Su-Ho

KKxLROg

...