845405 - [HTML5] styling the form error message bubble

Status: UNCONFIRMED

(Core :: Layout: Form Controls, enhancement)

Description

[Robin Winslow]

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:
http://stackoverflow.com/questions/12286367/how-do-i-style-html5-validation-errors-in-firefox

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:
http://www.the-art-of-web.com/html/html5-form-validation/


Actual results:

I couldn't find any way of styling these messages in Firefox. Searching turned up:
http://stackoverflow.com/questions/5328883/how-do-i-style-the-html-5-form-validation-error-messages-with-css
http://stackoverflow.com/questions/5713405/how-do-you-style-the-html5-form-validation-messages


Expected results:

Firefox (Gecko) should provide some way to style this error message, like Chrome does:
https://marakana.com/s/post/1336/styling_html5_form_validation_messages_with_css3

Comment 1

[Liz Henry (:lizzard) (relman/hg->git project)]

Thanks Robin!  Do you think you could give a test case as simple as possible? Maybe using http://codepen.io or http://jsfiddle.net/ .   

And maybe a screenshot of how you are trying to make it look, also.

Comment 2

[Mounir Lamouri (:mounir)]

Webkit proposes something: http://trac.webkit.org/wiki/Styling%20Form%20Controls

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:
http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#interactively-validate-the-constraints

Comment 3

[sjw]

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.