Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Styling HTML5 Form Validation Messages with CSS3

DZone's Guide to

Styling HTML5 Form Validation Messages with CSS3

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

In this screencast I demonstrate a hidden CSS3 feature of webkit, that allows us to override the default styling of the validation bubbles. You would think adjusting the CSS of the validation bubbles would be straight forward, and that you could jump into chrome developer tools and monkey 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. Basically it requires a little "under the hood monkey wrenching", however, luckily for us 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.

- For all the project files, head to http://bit.ly/css3forms
- Check out Marakana's HTML5 and other training courses here: http://mrkn.co/j6rti

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}