有没有办法覆盖 HTML5 表单验证消息的默认 CSS答案

【问题标题】：Is there a way to override default CSS of HTML5 form validation messages有没有办法覆盖 HTML5 表单验证消息的默认 CSS
【发布时间】：2015-06-10 13:22:24
【问题描述】：

我想将气泡消息的背景更改为红色，将文本更改为另一种语言，而不是英语。我已经为我的输入字段和 CSS 设置了“必需”以表示有效和无效，并且它正在工作。以及如何在悬停输入字段时显示此气泡消息。我尝试过：

 ::-webkit-validation-bubble-message {
     border: 1px solid #E6C700;
     background: #FF0000;

    }

但它不会改变。如何更改气泡消息的背景？我的有效和无效 CSS 是：

input:focus:invalid, select:focus:invalid { 
    background: #fff url("images/required.png") no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}
 input:required:valid, select:required:valid { 
    background: #fff url("images/valid.png") no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

【问题讨论】：

在“请在输入中输入内容”中的消息中，您希望它具有背景和不同的颜色？
好吧，我在 google 上进行了快速搜索，似乎大多数人都用 JavaScript 更改了它，所以你可能想看看。也许试试这个demosthenes.info/blog/697/…

标签： css html validation background

【解决方案1】：

 ::-webkit-validation-bubble-message

只能在 chrome 和 safari 上部分工作。

最终，您目前无法为这些设置样式，因为它们是特定于浏览器/操作系统的。

您可以使用 JS 更改消息，但目前您可以做到这一点。

【讨论】：

在 chrome 中使用时不会改变。
就像我说的，它只会部分起作用。你没有机会为它们设计样式。
我试着用这个来改变文本： var email = document.querySelector('input[type="text"]'); email.oninvalid = function(e) { e.target.setCustomValidity(""); if (!e.target.validity.valid) { e.target.setCustomValidity("必填字段");但是如何使它适用于所有输入类型=文本和输入类型选择？ };
我认为您不需要指定类型才能更改它。
我指定它：但它不起作用。我是 jQuery 新手： $.("input[type='text']").each(function(){ var email = $("input[type='text']", this); email.oninvalid = function(e) { e.target.setCustomValidity(""); if (!e.target.validity.valid) { e.target.setCustomValidity("Field is required"); } }; });