CODEWITHSUNDEEP
cssformshtmlwebkitrequired
H Bellamy
H Bellamy

Reputation: 22705

Styling for <input required ...> in WebKit

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?

Upvotes: 7

Views: 1120

Answers (1)

plaes
plaes

Reputation: 32716

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

Upvotes: 7

Related Questions