CSS :out-of-range

One aspect of web development I’ve always loathed was working with forms. Form elements have been traditionally 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. […]

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

One aspect of web development I’ve always loathed was working with forms. Form elements have been traditionally 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-range, developers 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.


Print Share Comment Cite Upload Translate
APA
David Walsh | Sciencx (2024-03-29T10:11:49+00:00) » CSS :out-of-range. Retrieved from https://www.scien.cx/2022/08/22/css-out-of-range/.
MLA
" » CSS :out-of-range." David Walsh | Sciencx - Monday August 22, 2022, https://www.scien.cx/2022/08/22/css-out-of-range/
HARVARD
David Walsh | Sciencx Monday August 22, 2022 » CSS :out-of-range., viewed 2024-03-29T10:11:49+00:00,<https://www.scien.cx/2022/08/22/css-out-of-range/>
VANCOUVER
David Walsh | Sciencx - » CSS :out-of-range. [Internet]. [Accessed 2024-03-29T10:11:49+00:00]. Available from: https://www.scien.cx/2022/08/22/css-out-of-range/
CHICAGO
" » CSS :out-of-range." David Walsh | Sciencx - Accessed 2024-03-29T10:11:49+00:00. https://www.scien.cx/2022/08/22/css-out-of-range/
IEEE
" » CSS :out-of-range." David Walsh | Sciencx [Online]. Available: https://www.scien.cx/2022/08/22/css-out-of-range/. [Accessed: 2024-03-29T10:11:49+00:00]
rf:citation
» CSS :out-of-range | David Walsh | Sciencx | https://www.scien.cx/2022/08/22/css-out-of-range/ | 2024-03-29T10:11:49+00:00
https://github.com/addpipe/simple-recorderjs-demo