36

Say you have some HTML like this:

<form>
    <input placeholder="Some text!" required>
    <input type="email" placeholder="An Email!" required>
    <input type="submit" value="A Button!">
</form>

Because of the required attributes, newer Webkits and Firefoxes show a validation message next to the field if you leave it blank.

They respond to being styled by a rule such as:

div {
    font: Helvetica;
}

But I can't find a more specific selector for them. Does anyone know what selector is used, or will be used, or even a bug report for webkit/gecko relating to this?

( JSFiddle showing that they can be styled with a div selector: http://jsfiddle.net/p7kK5/ )

ThiefMaster
  • 298,938
  • 77
  • 579
  • 623
Rich Bradshaw
  • 69,588
  • 44
  • 174
  • 240
  • 1
    No, but expect it to come through eventually. Seems more like a bit of an oversight in the spec - where does the message appear?, where is the message set (without JS)? There's an excellent proposal here, http://www.broken-links.com/2011/03/28/html5-form-validation/, but until something like that is added to the spec you'll have to stick to custom validation server-side and client-side – graham Apr 19 '11 at 14:10
  • 2
    possible duplicate of [How do I style the html 5 form validation error messages with css?](http://stackoverflow.com/questions/5328883/how-do-i-style-the-html-5-form-validation-error-messages-with-css) – Quentin Apr 23 '11 at 22:09

2 Answers2

39

Update: Chrome does not allow styling form validation bubbles anymore: https://code.google.com/p/chromium/issues/detail?id=259050

In the latest iterations of Chrome, support has been added for pseudo selectors for these, namely;

::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}

For more information on these, check out the Webkit "Styling Form Controls" trac page.

Additionally, firefox has support for the element attribute x-moz-errormessage which enables you to change the text of the error message, which is something you could do in Chrome using CSS to and -webkit-validation-bubble-message. See more about x-moz-errormessage on the MDN Docs page.

As of yet, Firefox has no way to style the error bubbles.

Udi
  • 27,155
  • 8
  • 91
  • 123
Keithamus
  • 1,749
  • 16
  • 21
  • 3
    When this comment was written I believe MDN (Mozilla Developer Network) used to be called MDC (Mozilla Developer Center). Both are the same. Edited for clarity. – Keithamus Jan 15 '12 at 20:56
  • 1
    It seems that this solution has stopped working with blink: https://code.google.com/p/chromium/issues/detail?id=259050 – Nacho Coloma Sep 10 '13 at 11:37
2

You'll need to use more specific selectors for everything else I'm afraid.. body > div etc.

Sheldon
  • 21
  • 1