☰

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

tag-icon • tag-icon google-chrome chromium gtk html5
Chrome HTML5 通知在白色背景上显示白色字体

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

正确的

问题是，我的系统使用的是深色背景的主题，因此默认字体是白色（或接近白色）。出于某种原因，Chrome 在这些通知上使用了该字体，导致以下情况：

错误的

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

有没有什么解决方法？

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

答案1

仅有的WebKit浏览器允许使用 -webkit-validation-bubble*CSS 样式。

然而，由于 Chrome 已经从 WebKit 迁移到眨，这已被删除。
例如，请参阅 问题 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 表单的本机客户端验证。

答案2

我能想到的唯一在浏览器端执行此操作的方法是使用用户样式表。在 Ubuntu（基于 Debian）上，您想要的文件应存储在此处：

$HOME/.config/chromium/Default/User StyleSheets/Custom.css

您必须使用开发人员工具中的检查元素选项来找出要覆盖的确切 CSS 样式元素，然后在上述文件中为其设置“color: black !important;”。

为了简单说明，您可以添加如下内容：

body { color: green !important; }

到文件并保存它以查看对任何带有元素的网页（基本上是任何网站页面）custom.css上的所有文本的影响（即时的） 。body

相关内容