0

Quisiera saber el como estilizar mejor mis alertas, que ya vienen predefinidas en el formulario de HTML. Anteriormente habia usado:

oninvalid="this.setCustomValidity('Por favor ingresa tu contraseña')"

para cambiar el texto, pero ahora me gustaria saber el como darle una vista mas agradable. ¿Cómo se haría?

foto de referencia

1 respuesta 1

0

No es posible dar estilo a ese elemento y hasta donde yo sé no existen planes a futuro para implementar esa funcionalidad.

En líneas generales, todos los elementos flotantes de los componentes web nativos, no tienen la posibilidad de editar los estilos. Esto incluye a:

  • Alertas de validación de inputs
  • Ventana de alert y prompt
  • Selectores de fecha para input del tipo: date, datetime-local, color y time
  • El popup del atributo title
  • La ventana de selección del elemento <select>. En este caso, si es posible dar un estilo limitado a los <option> como es el la fuente y su tamaño, y los colores de texto y fondo

Lo único que puedes hacer, y es algo relativamente nuevo, es cambiar el tema a modo oscuro o modo claro, utilizando la propiedad CSS color-scheme. Lo cual es un avance, porque antes en un sitio solo oscuro estos componentes eran visualmente incompatibles.

Hasta donde yo entiendo, el motivo de la imposibilidad se debe a temas de usabilidad. Por ejemplo en el caso de los <select> o los <input type="date"> son totalmente distintos en sistemas operativos de escritorio o en móviles.

La solución de hoy es crear ventanas y objetos flotantes customizados, para esto es obligatorio el uso de javascript. No obstamente, se espera que, en poco tiempo, se tengan todas las herramientas nativas para que el desarrollador pueda crear estos elementos customizados de forma más facil, gracias a nuevas API's nativas. Hoy, la única que falta para que sea esto posible es la del anchor positioning que resolverá el tema del correcto posicionamiento de un elemento flotante con respecto a otro elemento

Finalizo con una sugerencia o recomendación personal: Para formularios pequeños (como tu caso) esa alerta está bien, yo no me complicaría la vida tratando de implementar otra cosa.

No así, para formularios con más campos. En estos casos, yo coloco un mensaje abajo o al lado del input mostrando el error de validación, ya que la alerta nativa solo muestra un solo error (el primero) y no todos los errores del formulario.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.