在WebKit中为<input required ...>设置样式

Question

请在Chrome浏览器中查看此示例:http://jsfiddle.net/ymzTB/

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

当您将输入留空并只需单击回车时,您将收到如下消息:Please fill out this field.看起来不错.

如何在WebKit和其他浏览器中设置此消息的样式,例如,用红色替换背景颜色,或者将字体颜色或大小设置为其他颜色？

Answer 1

您可以使用以下伪类:

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