Type in a valid/invalid e-mail address and blur the field

Please enter a valid e-mail address

💡 The input will show a red/green validation border, but only when the input does not have the focus and is not empty. To achieve the latter we abuse the :placeholder-shown pseudo-class selector.

Demo 4/4 for https://brm.us/form-validation-invalid