Styling HTML5 Form Validation Messages with CSS3

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.

[cin]

Great tutorial! I didn't know you could provide regular expressions to your input elements. This might come in handy (in modern browsers only, though... :/ ).
A quick tip for ST2: You can use Cmd+L for selecting a line. (10:45)

[ConforMIDI]

5:00 you should probably be using hgroup. Otherwise, great tutorial. Question: are the same styling options available for Firefox using similar vendor selectors?

[cin]

Looks like Alfred. You might also want to check out Quicksilver. I don't know why he used it for switching applications, though. Cmd + Tab is usually quicker.

[bichitomax]

Great tutorial, but you sir will have the chance to gain my eternal gratitude if you tell me which ST2 color-scheme are you using, and how do you put icons on the command pallete.

Webkit's pseudo-elements are neat, but unless Firefox, and IE implement analogous functionality, I'm not sure if it's a good approach to invest in solutions that only work in Webkit browsers.

[munnaprasad]

its really helpful....thanx for uploading

[jacquelinevigilat]

Hello, someone ca tell me if this works if instead i use "form", I use my inputs in "div"???

[bichitomax]

Oh i notice that is the command pallete of your mac sorry my ignorance i don't realy use them, but please tell me the color scheme :).

[WhipTingz]

Make a video showing us all the shortcuts and tricks for Sublime, please.

[yousseffatih]

even when I stylize the bubble-message and the arrow it is not working for me

anyone can help

[jamesbarrow]

Would be great if it is possible in other browsers too

[alexmachin]

you should just validate it via php much easier.