:valid, :invalid, and :required CSS Pseudo Classes
Let's be honest, form validation with JavaScript can be a real bitch. On a real basic level, however, it's not that bad. HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching a given regular expression. What some people don't know is that you can style elements base on their required, valid, or invalid values. Here's how!
The CSS
Each state is colon-separated from the element it's associated with:
/* basics */
input:required {
border: 1px solid blue;
}
input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}
These pseudo classes are straight forward and useful. Here we're changing only borders, but you could use :before and :after to place text or an image next to each field, representing their state.
Being able to style elements based on invalid or valid information is something we've shimmed forever with JavaScript, but now we can do so (to some degree) with pure CSS!
![5 HTML5 APIs You Didn’t Know Existed]()
When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It." Can you blame us though? We watched the fundamental APIs stagnate for so long that a basic feature...
![CSS Gradients]()
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...
![Image Reflection with jQuery and MooTools]()
One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. Unfortunately creating image reflections within your...
![Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3]()
Row highlighting and individual cell highlighting in tables is pretty simple in every browser that supports :hover on all elements (basically everything except IE6). Column highlighting is a bit more difficult. Luckily MooTools 1.2.3 makes the process easy.
The XHTML
A normal table. The cells...
A small note:
:beforeand:afteronly works with elements that have content.inputs doesn’t, so these pseudo-elements won’t work.Amazing post, so in your example you are testing it with input text and email address is that all ?!
“now we can do so (to some degree) with pure CSS!”
could you please go into more detail about that degree? Browser support? Is this CSS3 only?
@Sumit – I can’t find any references on caniuse.com or anything similar. From my testing it works on: latest Chrome, latest Firefox, lateset Safari and IE10+. It doesn’t work on IE9 or below.
The :before and :after pseudo-elements elements interact with other boxes… as if they were real elements inserted just inside their associated element. More… http://www.corelangs.com/css/basics/pseudo.html CSS pseudo-elements
Eric
Bug in IE usign pseudo-elements
http://codepen.io/diegoleme/pen/cJyjF
A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic — they’re applied as a result of user interaction with the document.
for full implementation of pseudo class to refer here:
http://www.mindstick.com/blog/711/CSS%20Pseudo%20Class