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.
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it?
At first blush, it was the simplicity of it as compared to the table-and-spacer...
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
For the longest time, developers were frustrated by elements with overflow not being scrollable within the page of iOS Safari. For my blog it was particularly frustrating because I display my demos in sandboxed IFRAMEs on top of the article itself, so as to not affect my site's...
I love that JavaScript toolkits make enhancing web pages incredibly easy. Today I'll cover an effect that I've already coded with MooTools: creating a Twitter-style animated "Sign In" button. Check out this five minute tutorial so you can take your static...
What would be a use-case for this rather than using :invalid ?