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.
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: lightgreen
&:invalid
background: lightcoral
input
display: block
margin: 10px...