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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

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 }}