Not highlight required fields until form is submitted
Closed this issue · 4 comments
Is it possible to highlight form fields only when the form was submitted?
Probably not without custom styles, unfortunately :(
The highlight comes from the pseudoclass :invalid, which matches when the required input element doesn't have text. To work around this, you could write a custom class that would prevent this behaviour and another class that would reenable it again (set on submit).
But component styles are scoped. How do I override them? The only way I found is to add a more specified selector like id, or add !important to the rule. Is there any other way that allows to avoid using !important?
And by the way, thank you for the quick answer and the library =)
That's a tough one. The selector you need to override is .text-field.svelte-fxvd28 input.svelte-fxvd28.svelte-fxvd28:not(.outline):invalid. That's a lot of scoped classes, so even scoping from outside wouldn't help in this case. Unfortunately, in this case, !important and id seem to be the only options.
If I had to choose between them, I'd opt for the ID, because it's generally a good idea to give IDs to <input> elements, that allows giving them nice and accessible labels with <label for="...">.
I'll close this issue because I believe the question is resolved. If you have any further questions, feel free to reopen it.