Post

Love it, thank you for this. I was blanking on user-valid. All I remembered was that invalid always checked even when the user has not interacted with it. This is what I was looking for!

here's the @codepen.io link for it 🚀 👉 codepen.io/jh3y/pen/gbYbmNB

and a warning for anyone going down this path on their production application, make sure to give this article a solid read, and test these interactions with screen readers. adrianroselli.com/2023/04/expo...

good reference but also still leaves people thinking "right, so what do I do?" arguably - using CSS for purely visual aesthetic poses no issues. we shouldn't rely on color anyway updating aria-invalid on submit would be a "take away" here and that there isn't a clear route on where to put messages

will be cool to use this in a couple of years 😬

i'd go for it with styles in a progressively enhanced way the number of unsupported users is perhaps ~5% across "popular" browsers there but for those without support, are they going to miss/care if the input doesn't change color?