Styling HTML5 Form Validation Messages with CSS3
In this tutorial I demonstrate a hidden CSS3 feature of webkit that allows us to override the default styling of validation bubbles. You would think adjusting the CSS of validation bubbles would be straight forward, and that you could jump into Chrome Developer Tools and mess around with the way they look.
Unfortunately not. :(
These CSS3 features are not so openly documented and as easy to modify as we would like. With a little "under the hood monkey wrenching", however, these validation bubbles are completely customizable.
As long as you have some basic CSS styling chops, and know which "hidden selectors" do the all magic, you can make theses things look exactly as you want them to.
Download the complete project files here.
Interested in learning about HTML5 in person?
Check out some of our training courses.
Posted on Apr 23, 2013
Hi there. First of all, i want to say a big THANK YOU for this tutorial. Really helpful. Secondly, i have i question. The customization of the html5 validation bubbles can only be done for Chrome? Or there is there is also available for IE, Safari, Mozilla and Opera? Thank you very much.