在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

您可以使用以下pseudo classes：

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