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