Chrome HTML5 通知在白色背景上显示白色字体

Question

当用错误的类型或模式填充输入并点击“提交”时，Chrome 会显示如下所示的通知：

问题是，我在我的系统上使用了一个带有深色背景的主题，所以默认字体是白色（或接近它）。出于某种原因，Chrome 在这些通知中使用了该字体，结果如下：

我尝试更改Use GTK+ Theme为Use Classic Themeon chrome://settings，但问题仍然存在。“解决”它的唯一方法是更改​​为具有清晰背景的主题（在我的系统上，而不是在浏览器上）。

有什么解决方法吗？

我目前正在使用 Chromium Version 31.0.1650.63 Built on Debian 7.2, running on Debian 7.3 (238485)。

Answer 1

只有WebKit浏览器允许使用-webkit-validation-bubble*CSS 样式对验证气泡进行 样式设置。

但是，由于 Chrome 从 WebKit 移到Blink，因此删除了它。
例如，参见 问题 259050：::-webkit-validation-bubble 在 Chrome Blink 中停止工作。

您现在唯一的选择是覆盖通用验证气泡机制并发布您自己的消息。

在表单中，您可以使用novalidate 属性并在提交按钮中执行您自己的客户端验证：

HTML

<form novalidate> ... </form>

JavaScript

var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
    forms[i].addEventListener('invalid', function(e) {
        e.preventDefault();
        //Possibly implement your own here.
    }, true);
}

一篇关于表单验证的好文章是 约束验证：Web 表单的本地客户端验证。