Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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

share|improve this question
    
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

2 Answers 2

up vote 5 down vote accepted
+250

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.

share|improve this answer
    
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).

share|improve this answer
    
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

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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