38

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
  • 310,957
  • 84
  • 592
  • 636
Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
  • 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 Answers2

40

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

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Keithamus
  • 1,819
  • 17
  • 21
2

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

Sheldon
  • 21
  • 1