Стилизация верного и неверного поля ввода

css

/* Верный ввод */
input:valid {
border-color: green;
color: green;
box-shadow: none;
}
/* Не верный ввод */
input:invalid {
border-color: red;
color: red;
box-shadow: none;
}
/* Верный ввод при фокусе */
input:focus:valid {
border-color: green;
color: green;
box-shadow: none;
}
/* Не верный ввод при фокусе */
input:focus:invalid {
border-color: red;
color: red;
box-shadow: none;
}
/* Верный ввод при фокусе обязательного input */
input:focus:required:valid {
border-color: green;
color: green;
box-shadow: none;
}
/* Не верный ввод при фокусе обязательного input */
input:focus:required:invalid {
border-color: red;
color: red;
box-shadow: none;
}


input:invalid {
border: 2px dashed red;
}

input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}

Необычный стиль, с красной пунктирной линией и градиентным фоном.