Styling for <input required ...> in WebKit

Question

Please take a look at this example in Chrome browser: http://jsfiddle.net/ymzTB/

<form>
    <input required type = "text" >
    <input type = "submit" >
</form>

When you leave the input empty and just click enter, you'll receive a message like this: Please fill out this field. which looks nice.

How can I style this message in WebKit and other browsers, say, replace the background color with red, or set the font color or size to something else?

Answer 1

You can use following pseudo classes:

::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}