Style Form Valid and Invalid Input Values Using CSS

In this small and quick CSS tutorial, we will learn how to style form input fields when user enters a valid value or invalid values.

1
2
3
4
5

<form>
<label for="email_id">Email ID</label>
<input type="email" name="email" id="email_id">
<button type="submit">Submit Form</button>
</form>

1
2
3
4

input[type="email"]:valid {
color: green;
box-shadow: 0 0 10px green;
}

1
2
3
4

input[type="email"]:invalid {
color: red;
box-shadow: 0 0 10px tomato;
}

We can further add :focus to show effect only when field is focused.

1
2
3
4

input[type="email"]:valid:focus {
color: green;
box-shadow: 0 0 10px green;
}

How To Style Form For Valid and Invalid Input Values Using CSS