xxxxxxxxxx
/* in html, add required | <input required/> */
input:invalid{ /* ... */ }
xxxxxxxxxx
/* If input is not empty */
input:not(:placeholder-shown) {
/* You need to add a placeholder to your fields. For example: <input "placeholder=" "/> */
border-color: green;
}
/* If input is empty */
input:placeholder-shown {
border-color: red;
}
xxxxxxxxxx
input:invalid:not(:focus):not(:placeholder-shown){
background:red
}
xxxxxxxxxx
/* Show red borders when filled, but invalid */
input:not(:placeholder-shown) {
border-color: hsl(0, 76%, 50%);
}