Last Comment Bug 845405 - [HTML5] styling the form error message bubble
: [HTML5] styling the form error message bubble
: css3, html5
Product: Core
Classification: Components
Component: Layout: Form Controls (show other bugs)
: Trunk
: All All
-- enhancement with 3 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Jet Villegas (:jet)
Depends on:
  Show dependency treegraph
Reported: 2013-02-26 09:36 PST by Robin Winslow
Modified: 2014-08-14 09:22 PDT (History)
7 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Description User image Robin Winslow 2013-02-26 09:36:54 PST
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.97 Safari/537.22

Steps to reproduce:

As with this question:

I want to style the error message bubble that shows up when an <input> field is invalid. You can test with the <input>s on this page:

Actual results:

I couldn't find any way of styling these messages in Firefox. Searching turned up:

Expected results:

Firefox (Gecko) should provide some way to style this error message, like Chrome does:
Comment 1 User image Liz Henry (:lizzard) (needinfo? me) 2013-02-26 14:23:13 PST
Thanks Robin!  Do you think you could give a test case as simple as possible? Maybe using or .   

And maybe a screenshot of how you are trying to make it look, also.
Comment 2 User image Mounir Lamouri (:mounir) 2013-03-04 02:48:37 PST
Webkit proposes something:

We could try to have something that looks like that (if it is technically possible to apply some content pseudo-elements on browser.xul content) but I don't feel I pressing need for it given that I doubt any other browser allow to style the error message and there is already a way for authors to implement their own visual by preventing default on the invalid message:
Comment 3 User image sjw 2013-04-15 11:47:04 PDT
There is an option to style the error message a lot:
You can use the "x-moz-errormessage" attribute to choose your own error message.

Note You need to log in before you can comment on or make changes to this bug.