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

  • Try submitting the issue here – Oriol Feb 7 '14 at 18:07
  • Do you have an example page? – mpy Feb 9 '14 at 11:03

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:


<form novalidate> ... </form>


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

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

  • Thanks! I was hoping I could fix this locally (i.e. on my browser only, not having to change the website's code) so I'll leave the question unanswered for a little longer. – Alex Feb 9 '14 at 20:37

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

  • Unfortunately the validation bubbles are not stylable. – harrymc Feb 11 '14 at 16:32
  • Then that probably means modifying Chromium source to modify the internal stylesheet for the bubbles.. :-/ – milli Feb 11 '14 at 17:46
  • Do that, and many people will love you dearly. – harrymc Feb 12 '14 at 11:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.