¿Cómo se diseñan los mensajes de validación de formularios HTML5?

Question

Digamos que tiene algo de HTML así:

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

Debido a las required atributos, los nuevos webkits y Firefoxes mostrar un mensaje de validación junto al campo si se deja en blanco.

Responden a ser diseñado por una norma como:

div { 
    font: Helvetica; 
} 

pero no puedo encontrar un selector más específico para ellos. ¿Alguien sabe qué selector se usa, o se usará, o incluso un informe de error para webkit/gecko relacionado con esto?

(jsFiddle demostrando que pueden ser de estilo con un selector div: http://jsfiddle.net/p7kK5/)

Answer 1

actualización: Chrome no permite burbujas forma estilo de validación más: https://code.google.com/p/chromium/issues/detail?id=259050

En las últimas iteraciones de Chrome, se ha añadido soporte para pseudo selectores para éstos, a saber;

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

Para obtener más información al respecto, consulte Webkit "Styling Form Controls" trac page.

Además, Firefox tiene soporte para el elemento de atributo x-MOZ-ErrorMessage que le permite cambiar el texto del mensaje de error, que es algo que podría hacer en Chrome uso de CSS para la validación y webkit-burbuja -mensaje. Vea más sobre x-moz-errormessage on the MDN Docs page.

Hasta el momento, Firefox no tiene manera de diseñar las burbujas de error.

Answer 2

Usted tendrá que utilizar los selectores más específicos para todo lo demás me temo .. body> div etc.