CSS :out-of-range
source link: https://davidwalsh.name/css-out-of-range
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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. 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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK