Supporting forms styling with pseudoclasses

You can support the validation and simple interaction of forms with CSS code. In the following sections, you will see how to use CSS selectors for simple validation and simple interactions of inputs. With proper CSS code, you can also check if any element is required or disabled. Let's see how this is done.

Validation with :valid and :invalid

Earlier validation was done with JavaScript code. With proper CSS code, you can do it only with good selectors. Let's check it with the HTML and CSS code:

HTML code:

<form class="simple_validation">
    <input type="number" min="5" max="10" placeholder="Number">
    <input type="email" placeholder="Email">
    <input type="text" required placeholder="Your name"/>
</form>

SASS code:

.simple_validation
  padding: 10px
  width: 400px
  box-sizing: border-box

  &:valid
    background...