1

Estoy usando los mensajes de error de html

<form>
  <input required />
  <input type="submit" />
</form>

mi pregunta es: se puede modificar el letrero? hacerlo mas grande, cambiar el color y demas... lo muestro en una imagen

introducir la descripción de la imagen aquí

3
  • ¿A qué te refieres con mensajes de error de html?
    – AntoTGa
    Commented el 27 nov. 2016 a las 0:52
  • @AntoTGa disculpa, modifique mi pregunta
    – hubman
    Commented el 27 nov. 2016 a las 0:55
  • Ese cuadro de texto que se muestra es generado por el navegador, en este caso es Chrome, para poder mostrar o modificar algo así tendrías que hacerlo con un poco de código extra.
    – jrltt
    Commented el 27 nov. 2016 a las 1:06

2 respuestas 2

3

No es posible cambiar estilos del mensaje de errores de validación ya que estos son propios del navegador. Antes se podía realizar en chrome form_validation_messages haciendo uso de pseudo-elementos

::-webkit-validation-bubble
::-webkit-validation-bubble-arrow
::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-heading
::-webkit-validation-bubble-message
::-webkit-validation-bubble-text-block

Pero a partir de la versión 28 Chrome eliminó el Soporte para estos pseudo-elementos .

Lo que se puede es cambiar el mensaje que se presenta:

<input required  oninvalid="this.setCustomValidity('nuevo mensaje a mostrar')"/>
2

Antes existía la forma de hacerlo en chrome con los pseudo-elementos, pero dejaron de funcionar en 2013.

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

https://bugs.chromium.org/p/chromium/issues/detail?id=259050

La única manera de implementar tu estilo personalizado es que hagas un sistema de validación desde cero.

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.