Google-chrome – Chrome HTML5 notifications displaying white font on white background

chromiumgoogle-chromegtkhtml5

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

Correct

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:

Wrong

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).

Best Answer

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.

Related Solutions

Google-chrome – How to fix the Chrome HTML5 canvas

Chrome's browser console shows the following error:

Refused to execute a JavaScript script. Source code of script found within request.

The reason it isn't working is because Chrome thinks it's a XSS (cross-site-scripting) attack.

Google-chrome – Prevent white screen before loading page in chromium

For Google Chrome and Chromium, you are probably a victim of Issue 1373: Navigating dark background websites results in blinding white flashes between pages.

There's a hack to minimize, but not totally eliminate, your misery described in comment 261:

As a temporary fix, I set the custom user stylesheet to render pages with a black background so that before it receives styling information from the website it renders the window black instead of white, and now it flashes black instead, which is much more bearable on the eyes until a permanent solution is made.

The hack involves adding the following lines to your Custom.css which is located in User Stylesheets in your Default folder. In my case, the path is ~/.config/chromium/Default/User Stylesheets.

html, body{
background-color:#000000; //This sets the background color to black
color:#0000FF; //This sets the text to blue, so you can read it on webpages set to use defaults; white is too hard on my eyes and if you dont put this it will be black on black
}

As for Firefox, I use the following code in userChrome.css located in ~/.mozilla/firefox/profile_name/chrome:

@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/*prevent white flash*/
tabbrowser tabpanels { background-color: #111 !important}

If the chrome folder doesn't exist, create it. Note that both chrome and userChrome.css are case-sensitive.

Best Answer

Related Solutions

Google-chrome – How to fix the Chrome HTML5 canvas

Google-chrome – Prevent white screen before loading page in chromium

Related Question