Default required input styling
Hey everyone, I'm trying to style an required input differently based on if it's in its default state, versus when a user either gives an invalid input or tries to submit the form before giving a valid input. I thought I could use the :user-invalid pseudo selector mentioned on MDN but only firefox and Safari support it at the moment. Using a combination of :required, :blank and :invalid also won't work because no one supports :blank. Any ideas?
TLDR: I don't required inputs to be automatically invalid and red when loaded and need help changing that.
3 Replies
Instead of
:blank, you could use :placeholder-shown.
It is a bit hacky if you're not using placeholders, as you'd probably do something like placeholder=" " so a comment or some documentation around that would probably be kind of useful, even if it's just to yourself for the future 🙂Thank you. That worked well enough
Be nice if there was something a little better, but glad it worked 😁