CSS Form validation
Form Validation: You want
:not(:focus):invalid, not:invalid
Turns out that it is possible to giver proper user feedback about form validations, (partially) preventing the need to include heaps of javascript on a page to do basic validation feedback.
.error-message {
display: none;
}
input:not(:focus):not(:placeholder-shown):invalid {
border-color: var(--color-invalid);
}
input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
display: block;
}
input:not(:focus):not(:placeholder-shown):valid {
border-color: var(--color-valid);
}