CSS :out-of-range

0
13

One aspect of web development I’ve always loathed was working with forms. Form elements have traditionally been difficult to style due to OS and browser differences, and validation can be a nightmare. Luckily the native HTML APIs added methods for improving the form validation situation.

With input[type=number] elements, you can add min and max attributes. Those attributes are great but the browser doesn’t display distinct error styles if those numbers are out of range. Luckily we have :out-of-range:

/* matches when number is not within min and max */
input[type=number]:out-of-range 
  border-color: red;

Thanks to CSS :out-of-rangedevelopers can style input elements based on its valid value status. Despite the HTML validation and styling, you must still do server side validation; honestly, you probably also want to do JavaScript validation here too.

The post CSS: out-of-range appeared first on David Walsh Blog.

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here