mozilla
Los resultados de tu búsqueda

    :invalid

    Resumen

    La pseudo-clase :invalid de CSS representa a cualquier elemento <input> o <form> cuyo contenido falla al intentar ser validado según la configuración de tipos del input. Este selector permite que los campos inválidos adopten una apariencia diferente que ayude al usuario a dectectarlos y corregirlos fácilmente.

    Por defecto, Gecko no aplica un estilo a la pseudo-clase :invalid. Sin embargo sí que aplica un estilo (un brillo rojo haciendo uso de la propiedad  box-shadow) a la pseudo-clase :-moz-ui-invalid, que corresponde en algunos casos con el subconjunto generado por :invalid 

    Se puede deshabilitar este brillo usando el siguiente código CSS, o sobreescribirlo completamente para modificar la apariencia de los campos inválidos:

    :invalid {
      box-shadow: none;
    }
    
    :-moz-submit-invalid {
      box-shadow: none;
    }
    
    :-moz-ui-invalid {
      box-shadow:none;
    }
    

    Notas

    Radio buttons

    Si alguno de los elementos de un grupo (elementos que comparten el mismo valor para el atributo name ) es obligatorio (required), la pseudo-clase :invalid se aplica a todos los botones del grupo del grupo si ninguno de ellos ha sido seleccionado.

     

    Ejemplo

    Este ejemplo presenta un simple formulario cuyos elementos se colorean en verde cuando son válidos, o en rojo cuando no lo son.

    Contenido HTML

    <form>
      <label>Enter a URL:</label>
      <input type="url" />
      <br />
      <br />
      <label>Enter an email address:</label>
      <input type="email" required/>
    </form>

    Contenido CSS

    input:invalid {
      background-color: #ffdddd;
    }
      
    input:valid {
      background-color: #ddffdd;
    }
      
    input:required {
      border-color: #800000;
      border-width: 3px;
    }

    Especificaciones

    Especificación Estado Comentario
    WHATWG HTML Living Standard Living Standard Sin cambios.
    HTML5 Candidate Recommendation Define la semantica asociada al HTML y la validación de restricciones.
    Selectors Level 4 Working Draft Sin cambios.
    CSS Basic User Interface Module Level 3 Working Draft Define la pseudo-clase, pero no la semantica asociada.

    Compatibilidad con los navegadores

    Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Soporte básico (<input>) 10.0 4.0 (2) 10 10.0 5.0
    Aplicación sobre <form> ? 13 (13) ? ? ?
    Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Soporte básico ? 4.0 (2) Not supported 10.0 5.0
    Aplicación sobre <form> ? 13.0 (13) ? ? ?

    Ver también

    Etiquetas y colaboradores del documento

    Contributors to this page: ccastillos, teoli
    Última actualización por: teoli,