Kyle
¿Cómo diseño los mensajes de error de validación de formulario HTML con CSS?
ramín
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 deshabilitar la validación del navegador por ahora y confiar en mis propios scripts de validación del lado del cliente.
Según 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 participar es agregar el novalidar atribuye a tu <form>. También puede configurar formanovavalidar en sus controles de envío”.
-
Otra referencia: desarrollador.mozilla.org/en-US/docs/Learn/HTML/Forms/…
– 1,21 gigavatios
1 de julio de 2019 a las 17:14
Estela
Chrome hasta la versión 27 proporcionó una apariencia nativa para sus burbujas de diálogo de error de validación. La burbuja de error se compone de cuatro elementos que contienen elementos que no son normativos. Estos cuatro elementos se pueden diseñar a través de pseudoelementos 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
Con el lanzamiento de Chrome v28, eliminaron estos selectores no estándar: https://bugs.chromium.org/p/chromium/issues/detail?id=259050
-
Las burbujas de error de validación de Chrome no me parecen nativas. Se ven tan feos (antes de Chrome 15).
– XP1
11 de septiembre de 2011 a las 10:41
-
configurar estos para mostrar: ninguno bloquea Chrome
-Peter Ehrlich
4 de febrero de 2012 a las 7:35
-
He abierto un error para el bloqueo, mira code.google.com/p/chromium/issues/detail?id=117746
– Ronny
11/03/2012 a las 21:35
-
Si te interesa arreglar esto en Firefox, vota por el error: bugzilla.mozilla.org/show_bug.cgi?id=845405
–Robin Winslow
26 de febrero de 2013 a las 17:39
Remixz
Use pseudoselectores, como dijo easwee. Por ejemplo, para hacer que el elemento de formulario sea verde cuando sea válido y 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 Red de desarrolladores de Mozilla
-
Esta respuesta (como todas las demás) parece perder la pregunta. La pregunta no es cómo diseñar la entrada del formulario en función de su estado de validación. La pregunta es cómo diseñar los mensajes de error que muestra el navegador, por ejemplo “Por favor rellene este campo.” en cromo.
– Phrogz
28 de abril de 2011 a las 3:46
Un campo obligatorio no será válido hasta que se ingrese la entrada correcta. Un campo que no es obligatorio pero 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