Consider using :user-invalid instead of :invalid on inputs

[angelikatyborska]

Currently, input:invalid is used to look like an input with errors. This can be annoying because inputs that the user didn't touch at all look like they have errors, e.g. when the input is required.

To prevent this form happening, we could switch to the newer :user-invalid.

[planktonic]

:user-invalid is way nicer, for sure! Can we apply this enhancement progressively? According to caniuse, the support in blink and webkit only started last year.