Post

you can use CSS to detect not only when a form is :valid but also when it's been interacted with s/:valid/:user-valid 🤙 .group:has(:user-invalid) { --color: var(--invalid); } input:user-invalid + .error { display: block; }

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

Oh I agree. It's one of the most frustrating part of these things. "Okay...so what is the right answer" "There is none. You need user testing, and manual testing" Isn't exactly a fun answer to get :/ And then each browser behaving differently provides some extra 🪄 razzle dazzle 🪄

Oh no. You're on the money. Ive spent the last ~1month at work working on opinionated form styling similar to this and getting the incantations correct for this and also making it extensible. Its so painful accounting for the permutations of browser + reader. Its a hard problem that looks easy.