Styling HTML5 Form Validation Messages with CSS3
Posted on Nov 30, 2012
(28 weeks ago).
Seen 3,262 times.
One comment.
Member since Apr 16, 2012
Stream Posts: 3
Stream Posts: 3
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.
Regards!