CSS: Day 57

The invalid pseudo-class selector

We are mainly going to focus on the invalid pseudo-class selector.

To give you the gist of what is happening in the above GIF, when an incorrect value is entered in the input field its bottom border turns red and when you type in the correct text its bottom border turns green.

All of this is being achieved by using the focus and invalid pseudo classes.

//HTML
<form action="">
  <fieldset>…