¿Cómo doy estilo a los mensajes de error de validación de formularios HTML5 con CSS?

Question

¿Cómo doy estilo a los mensajes de error de validación de formularios HTML5 con CSS?

Answer 1

Use pseudo selectores, como dijo easwee. Por ejemplo, para hacer la forma de elemento de color verde cuando válida, y en rojo cuando no válida, hacer algo como esto:

:invalid { 
    background: #ffdddd; 
     } 
:valid{ 
     background:#ddffdd; 
     } 

Si necesita una referencia completa de éstos, a la cabeza Mozilla's reference.

P. S. Lo siento si estoy haciendo estas respuestas mal, soy nuevo en esta comunidad.

Answer 2

Actualmente, no hay forma de darles un estilo pequeño a la información sobre herramientas de validación. La única otra opción, que es lo que he elegido hacer, es desactivar la validación del navegador todos juntos por ahora y confiar en mis propios scripts de validación del lado del cliente.

De acuerdo con este artículo: http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4

"La forma más sencilla de optar por no consiste en añadir el novalidate atributo a su <form> También puede establecer formnovalidate presentar en sus controles.".

Answer 3

Chrome proporciona una apariencia nativa para sus burbujas de speach de validación. La burbuja de error se compone de cuatro elementos que contienen elementos que no son normativos. Estos cuatro elementos son con estilos a través de pseudo-elementos que se aplican a secciones separadas de la burbuja:

::-webkit-validation-bubble 

::-webkit-validation-bubble-arrow-clipper 

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message 

---

Actualización: Este método es obsoleto.

Answer 4

Para Google Chrome, no es posible mensajes de validación de estilo más: https://code.google.com/p/chromium/issues/detail?id=259050

Answer 5

un campo obligatorio no será válida hasta que se introduzca la entrada correcta. Un campo que no es obligatorio pero que tiene validación, como un campo de URL, será válido hasta que se ingrese el texto.

input:invalid { 
border:solid red; 
} 

para obtener más información http://msdn.microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx