Styling for 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?

possible duplicate of [override css for html5 form validation/required popup](http://stackoverflow.com/questions/5478800/override-css-for-html5-form-validation-required-popup) — derekerdmann, Jan 04 '12 at 17:57

score 7 · Accepted Answer · answered Jan 04 '12 at 18:05

7

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

answered Jan 04 '12 at 18:05

plaes

31,788
11
91
89

Styling for in WebKit

1 Answers1