Web Development

The :valid and :invalid classes are really interesting. It is something you might want to think of using in the future. Why? It is so easy to implement.

Form

<form>
    <p>
        <label>Required Text </label>
        <input type='text' required>
    </p>
    <p>
        <label>Required Email </label>
        <input type='email'>
    </p>
</form>

CSS

The first CSS block means that whenever the text field is invalid, it would have a red background. The second CSS block means that when a text field is valid, it would have a green background.

input:invalid {
    background-color: red;
}
input:valid {
    background-color: green;
}

A little explanation

In our form, the first text field would have a red background initially because it has a required attribute. It changes to green as soon as content is typed in.

The second text field does not have a required attribute making it green initially. As soon as you type in something, it turns red. It would need a valid email address typed in before it becomes green.

Code Sample

Here is the code sample. Try it! https://jsfiddle.net/teejay/9s7an5oq/1/

Invalid valid css class sample