Change colours when required fields complete
Is there a way to change the form background and input background and input text colours once all the Required fields are complete. even though not all of the fields are completed and before the submit, all with CSS?
Regards
Pete
18 Replies
Halfway there https://jsfiddle.net/Lyp5j4sz/1/
Seems like the browser(chrome) does not handle the valid/invalid conditions correctly on page load – not sure if there is a way around that "neutral state" in CSS 🫠
sorry, I dont have time for more right now
actually, you are using
:user-valid and :user-invalid
as you should be
the goal of those is to let the user interact first with the elements
then, after the first interaction/submit, it will style as valid or invalid
so, when the page loads, and since the user didnt interact, the styles arent applied: as it should be
if you want it to show as invalid on refresh ... please dontYou could try this:
but please, dont do that
Honestly, at some point I shuffled :not and :has around like a maniac 🤣
there is a good reason to do use :user-invalid
But the styles get applied on load, when I look at the fiddle. What is your solution to prevent the default invalid and/or user-invalid visual?
perhaps focus-within could help ...
no
:user-invalid
with that, it is supposed to only show the invalid status when the user interacts
I think we have a misunderstanding. But I'd love to see a corrected version using user-invalid which I am already using 🌭 could be handy someday
you are using the correct one then
The issue is, that the form is pink and yellow on load because the pseudo apparently does not prevent the conditions from taking effect, or the CSS in the jsfiddle is faulty. In the optimal case the form is colorless and only highlighted when the conditions, that were demanded by the OP, meet due to the users interaction.
You can't use user-valid (or user-invalid) for this as, by their very nature, those selectors require the user to interact with the fields which they won't have done on page load.
If I understood the initial question correctly, the OP wants something like this
There we go
Chris, your solution works they way I was looking for. ἔρως solution focuses on the placeholder. Fields might not have a placeholder.
maybe i'm missing something, but wouldn't the selector
form:valid be sufficient here?you are right 🤦♂️
it happens, sometimes im way overthinking pseudo selectors too, while form has its on valid state
you can always use a single space as a placeholder so it doesnt visually show one but you can still take advantage of the :placeholder-shown pseudo class