Style for <input required ...> in WebKit

Question

Check out this example in the Chrome browser: http://jsfiddle.net/ymzTB/

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

When you leave the entry empty and just press "Enter", you will receive a message that resembles the following: Please fill out this field. that looks good.

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

Answer 1

You can use the following pseudo classes :

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