Styling HTML5 Form Validation Errors

Warning This article was written over six months ago, and may contain outdated information.

Back in March I wrote about HTML5 Form validation and the problem with the appearance of error messages. I proposed a syntax for styling the error messages, and shortly after I published the post, I submitted the proposal to the W3C via the www-style mailing list.

I’ll discuss quickly the result of that submission, but first I should mention that I’ve since found out that the Google Chrome developers have already implemented their own syntax, and it’s not too far removed from what I proposed. Before I get to that, however, allow me to gripe.

What the feedback on my proposal would be, I have no idea — and may never know. As I mentioned, I submitted it via the www-style list, but my emails were never published. I was told that as a new user my mail would be held for approval, but that was six weeks ago. I emailed the list administrator and tried to submit it again, but never got a reply.

I have to say that, as a developer trying to get involved in the standards process — which is what the W3C claim they want — this was not a good experience for me. I had a serious proposal which I wanted to open up for discussion, but was completely unable to do so and met with a wall of silence. I’m not against there being a moderation and approval process, but only if there’s an eventual result and some kind of communication throughout.

OK, with the moan out of the way, I’ll talk about the Chrome validation error styling syntax. The error message, known as the ‘bubble’, is made of four div elements which are accessible via four pseudo-classes, each of which applies to a different div in the bubble:

::-webkit-validation-bubble {}
::-webkit-validation-bubble-arrow-clipper {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-message {}

The parent element is ::-webkit-validation-bubble, which sets the size and position of the bubble, and has two child elements. The first child is ::-webkit-validation-bubble-arrow-clipper, which has its own child, ::-webkit-validation-bubble-arrow; these two set the styles of the tail of the bubble. The body of the bubble is the second child, ::-webkit-validation-bubble-message, which contains the text node with the error itself.

I’ve made a quick example which you can see in action on the HTML5 Forms demo — you’ll need to use Chrome to see it, and you can view the source to see the styles I’ve used. Below is an image comparison of the default message (top) and my styled version. Note: I took a little criticism for calling the default styles ‘ugly’ in my original post, and I don’t want to claim that mine is any better, because it’s really not; it’s just different, to act as an example.

Default (top) and styled validation error message

You can read a little more about this syntax on the WebKit wiki, and also see the default styles the error message uses. I’ve no idea if Firefox or Opera implement their error messages in the same way so don’t know if this is likely to become standard, or will always remain a WebKit-only syntax. I have to say it’s not really an elegant solution, but it works.

15 comments on
“Styling HTML5 Form Validation Errors”

  1. Peter,

    I for one am quite concerned with the www-style “emails were never published” problem. Did you sign-up for the www-style mailing list before sending?

    I just read your original proposal http://www.broken-links.com/2011/03/28/html5-form-validation/ for the first time and frankly prefer the approach you’re taking there.

    Please try signing up for the www-style mailing list:

    mailto:www-style-request@w3.org?subject=subscribe

    and resend your email/proposal and feel free to CC me as well.

    Tantek Çelik
    editor, CSS3 Basic User Interface module

  2. Thanks, Tantek, I’ll do that now. I’ve redacted your email, btw, to try to spare your spam servers a little.

  3. The problem I would see with this is that it’s very explicitly tied to the bubble that browsers have currently chosen for their styling. What happens if, say on other devices like mobile, browsers choose a completely different visual metaphor to show errors? Or even on desktop?

  4. @Patrick — Yes, their properties are explicitly tied to their implementation and probably not very transferable; I think they’re probably only for internal use and not intended to be exposed to the public, tbh.

  5. It seems that Opera has an issue with validation bubbles in that if you use @font-face to define the default font for your website, the validation bubble shows up but no text is shown. The only way to get text in the validation bubble is to set the default font to one which is installed on the local host.

  6. validation not working with IE

  7. […] Styling HTML5 Form Validation Errors […]

  8. […] 8. Styling HTML5 Form Validation Errors […]

  9. […] Styling HTML5 Form Validation Errors […]

  10. Hi,

    Thank you !
    You can also add
    ::-webkit-validation-bubble-icon {}
    in your list of pseudo-elements.

    Here is an article : http://www.alsacreations.com/tuto/lire/1391-formulaire-html5-placeholder-required-pattern.html (with a demo at the end of document).

    regards

  11. […] error messages are browser and OS specific, and hard to modify (which I documented on my blog), but you can change the way the errors appear on the elements themselves with the new validation […]

  12. […] der Hinweise und/oder Fehlermeldungen der HTML5-Validierung browserabhängig und im Moment nur ungenügend anpassbar. So unterscheidet sich die Darstellung in den verschiedenen Browsern teilweise drastisch. Zum […]

  13. […] к браузеру и от OS к OS, и с трудом поддаются модификации (что я задокументировал в своем блоге), но можно поменять индикацию ошибки на самом элементе […]

  14. […] a prozatím ji nelze standardně stylovat. Chrome má některé vlastní pseudo – třídy, se kterými to lze, Peter Gasston o tom napsal článek. Dále můžete stylovat inputy pomocí :required pseudo – třídy. Alternativně lze předefinovat […]

  15. […] آلية للقيام بذلك والتي يُمكن التعرف عليها بقراءة هذا المقال. يبقى التحكم في مظهر الحقل المعني برسالة الخطأ مُمكنا […]