How do you create HTML5 form validation posts?

Question

Say you have this HTML code:

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

Due to the required attributes, the new Webkits and Firefoxes show a validation message next to the field, if left blank.

They respond to being styled by the rule, for example:

 div { font: Helvetica; } 

But I can not find a more specific selector for them. Does anyone know which selector is being used or will be used, or even the error report for webkit / gecko related to this?

(JSFiddle shows that they can be created using the div selector: http://jsfiddle.net/p7kK5/ )

Answer 1

Update: Chrome no longer allows stylesheet validation templates: https://code.google.com/p/chromium/issues/detail?id=259050

In recent Chrome iterations, support for pseudo selectors has been added for them, namely:

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

For more information about this, check out the Webkit "Styling Form Controls" page. Strike>

Firefox also supports the x-moz-errormessage element attribute, which allows you to change the text of the error message, which you can do in Chrome using CSS and -webkit-validation-bubble-message. Learn more about x-moz-errormessage on the MDN Docs page .

Firefox is currently unable to erase error bubbles.

Answer 2

You will need to use more specific selectors for everything I'm afraid of. body> div, etc.