The default bug view has changed. See this FAQ.

[HTML5] styling the form error message bubble




Layout: Form Controls
4 years ago
3 years ago


(Reporter: Robin Winslow, Unassigned)


({css3, html5})

css3, html5

Firefox Tracking Flags

(Not tracked)


(Whiteboard: DUPEME, URL)



4 years ago
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:


4 years ago
Keywords: css3, html5
OS: Windows 7 → All
Hardware: x86_64 → All
Component: Untriaged → Layout: Form Controls
Product: Firefox → Core
Version: unspecified → 19 Branch
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.
Flags: needinfo?(robin)
Flags: needinfo?(mounir)
Whiteboard: DUPEME
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:
Flags: needinfo?(robin)
Flags: needinfo?(mounir)
Version: 19 Branch → Trunk

Comment 3

4 years ago
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.


3 years ago
Severity: normal → enhancement
You need to log in before you can comment on or make changes to this bug.