Chrome HTML5 notifications displaying white font on white background

Question

When filling an input with the wrong type or pattern and hitting "submit", Chrome displays notifications as shown below:

The thing is, I'm using a theme with a dark background on my system, so the default font is white (or close to it). For some reason Chrome uses that font on those notifications, resulting in the following:

I tried changing Use GTK+ Theme to Use Classic Theme on chrome://settings, but the problem persisted. The only way to "solve" it was changing to a theme with a clear background (on my system, not on the browser).

Is there any workaround to it?

I'm currently using Chromium Version 31.0.1650.63 Built on Debian 7.2, running on Debian 7.3 (238485).

Answer 1

Only WebKit browsers allow styling of validation bubbles using the -webkit-validation-bubble* CSS styles.

However, since Chrome moved away from WebKit to Blink, this was removed.
See for example Issue 259050: ::-webkit-validation-bubble stopped working in Chrome Blink.

Your only option now is to override the general validation bubble mechanism and issue your own message.

In a form, you can use the novalidate attribute and do your own client-side validation in the Submit button:

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);
}

A nice article about form validation is Constraint Validation: Native Client Side Validation for Web Forms.

Answer 2

The only way I can think of to do this on the browser side only is to use a User Stylesheet. On Ubuntu (based on Debian), the file you want should be stored here:

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

You'll have to use the Developer Tools to use the Inspect Element option to find out the exact CSS styling element to override and then set "color: black !important;" on it in the file above.

As a simple example to illustrate, you can add something like:

body { color: green !important; }

to the custom.css file and save it to see the effect (which is immediate) on all text on any web page with a body element (which is basically any site page).