Loading video...

Video Failed to Load

Go Home

Suuuper handy new CSS: :user-invalid and :user-valid pseudo selectors let you style inputs only once they have been interacted with Just landed in Chrome + Safari, been in Firefox for years.

177,399 views • 2 years ago •via X (Twitter)

10 Comments

Gordon Shumway's profile picture
Gordon Shumway2 years ago

This is great! I had to use JS to achieve same functionality multiple times.

Wes Bos's profile picture
Wes Bos2 years ago

There is some angular form validation library that does it on keyup, and i can always tell it's angular because after the first keystroke it yells at you for it being invalid

Alex Painter's profile picture
Alex Painter2 years ago

At some point this is all going to be too easy. What do we do then? Jokes aside, this is 🔥

Wes Bos's profile picture
Wes Bos2 years ago

go outside? Or make another JS framework

Ben Bennitt's profile picture
Ben Bennitt2 years ago

Working on form validation today. Wes and the X algo delivering 👊

Steve Rios's profile picture
Steve Rios2 years ago

VERY nice!

Alexey Lyakhov's profile picture
Alexey Lyakhov2 years ago

How long it will take for tailwind to support user-valid/invalid ?

Wes Bos's profile picture
Wes Bos2 years ago

Looks like it's already been added, but not yet shipped. You can use [&:user-invalid]:border-red-500 with arbitrary syntax until then

Eddy Erkelens 🧑‍🏫's profile picture
Eddy Erkelens 🧑‍🏫2 years ago

@argyleink This should have been launched in 2020. But nevertheless: nice! Handy and usefull!

Juan's profile picture
Juan2 years ago

@midudev =O!!

Related Videos