:invalid & :valid

Showing that the :invalid and :valid pseudoselectors are applied immediately, even before a field is interacted with.

by TJ VanToll

HTML

<form>
    <input type="text" required />
    <input type="text" />
</form>

CSS

:invalid {
    border: 1px solid red;
}
:valid {
    border: 1px solid green;
}