css - スタイリングWebKitで

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