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

validar solo letras en html

Question

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

Answer 1

Actualmente, no hay forma de diseñar esas pequeñas sugerencias de 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 cancelar la suscripción es agregar el atributo novalidate a su <form> . También puede establecer formnovalidate en sus controles de envío".

Answer 2

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 personalizables mediante 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 está obsoleto.

Answer 3

Para Google Chrome, ya no es posible cambiar el estilo de los mensajes de validación: code.google.com/p/chromium/issues/detail?id=259050

Answer 4

Un campo obligatorio no será válido hasta que se ingrese 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 más información http://msdn.microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx

Answer 5

Use pseudo selectores, como dijo easwee. Por ejemplo, para hacer que el elemento del formulario sea verde cuando sea válido y el rojo cuando no sea válido, haga algo como esto:

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

Si necesita una referencia completa de estos, diríjase a la referencia de Mozilla.

PD: Lo siento si estoy haciendo estas respuestas mal, soy nuevo en esta comunidad.