How do I style HTML5 validation errors in Firefox

Question

I've read countless articles, but I still haven't found a way to style HTML5 validation errors in Firefox. Has anybody had any luck w/ this? I've been able to style some nice messages in Chrome and IE (using Webshims for IE).

I don't like the look of the messages in Firefox (see screenshot). This link doesn't sound promising. Nor does this one. However, those links are a bit stale. I'm hoping someone has figured this out for newer versions of Firefox (I'm using version 14.0.1) .

HTML5 validation message in Firefox

score 2 · Accepted Answer · answered Oct 23 '12 at 13:53

2

The answer is... there is no answer? I've continued searching, and I still don't see a way to style these errors in Firefox. The good news, however, is that the latest release of Firefox (16.0.1) has cleaned-up the appearance of the prompts, and removed the ugly inner rectangle (see screenshot). Still, it would be nice to style these w/ a custom color; perhaps white text on dark background, for example.

enter image description here

answered Oct 23 '12 at 13:53

WEFX

8,298
8
66
102

1

If you care about fixing this on Firefox, please vote on the bug: bugzilla.mozilla.org/show_bug.cgi?id=845405 – Robin Winslow Feb 26 '13 at 17:55

score 1 · Answer 2 · edited Feb 15 '15 at 01:55

1

I'm not sure how I got here, this seems an old thread. But just to be sure anyone who does pass get the right (up-to-date) answer:

Styling form errors with CSS can be done through the pseudo-selector :invalid

So for the Firefox error-box you can remove it using like:

input[type="number"]:invalid {box-shadow: none;}

edited Feb 15 '15 at 01:55

AADProgramming

6,077
11
38
58

answered Feb 15 '15 at 01:21

Tiezol

19
1

score -2 · Answer 3 · edited May 23 '17 at 11:48

-2

The same question here ==> How do I style the HTML5 form validation error messages with CSS?

And at the moment I don't think we can design the tooltip. You can use the novalidate attribute for your form and create your custom tooltip.

edited May 23 '17 at 11:48

Community

1
1

answered Sep 05 '12 at 17:18

ke20

665
4
19

I've read that question, and it does a good job of handling Chrome w/ the webkit-validation... css classes. It does not address Firefox. That's why I posted a comment to [this answer](http://stackoverflow.com/a/6555897/590719) . – WEFX Sep 05 '12 at 17:27

How do I style HTML5 validation errors in Firefox

3 Answers3