mozilla
Vos résultats de recherche

    :invalid

    Résumé

    La pseudo-classes :invalid représente tout élément <input> dont la validation du contenu échoue en regard du type de donné attendu. Ceci permet de donner aisément une apparence aux champs non valides aidant l'utilisateur à identifier et corriger les erreurs.

    Par défaut, Gecko n'applique pas d'apparence à la pseudo-classe :invalid . Toutefois une apparence est appliquée (une « lueur » rouge utilisant la propriété box-shadow ) sur la pseudo-classe :-moz-ui-invalid , qui s'applique dans un sous-ensemble de cas pour :invalid.

    Vous pouvez désactiver cette lueur en utilisant le CSS suivant, ou en redéfinissant complètement l'apparence des champs invalides.

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

    Notes

    Boutons radio

    Si un quelconque bouton radio dans un groupe (c'est-à-dire, avec la même valeur pour leur attribut name ) possède l'attribut required , la pseudo-classe :invalid est appliquée à tous les boutons si aucun d'entre eux n'est sélectionné.

    Exemple

    Cet exemple présente un formulaire simple dont les éléments sont verts lors qu'ils sont validés et rouges lorsqu'ils ne le sont pas.

    Contenu HTML

    <form>
      <label for="url-input">Tapez une URL :</label>
      <input type="url" id="url-input">
      <br>
      <br>
      <label for="email-input">Tapez une adresse courriel :</label>
      <input type="email" id="email-input" required>
    </form>
    

    Contenu CSS

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

    Spécifications

    Spécification Statut Commentaire
    WHATWG HTML Living Standard
    La définition de ':invalid' dans cette spécification.
    Standard évolutif Aucun changement.
    HTML5
    La définition de ':invalid' dans cette spécification.
    Recommendation Défini la sémantique concernant HTML et les contraintes de validation.
    Selectors Level 4
    La définition de ':invalid' dans cette spécification.
    Version de travail Aucun changement.
    CSS Basic User Interface Module Level 3
    La définition de ':invalid' dans cette spécification.
    Version de travail Défini la pseudo-classe, mais pas l'association sémantique.

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support de base (<input>) 10.0 4.0 (2) 10 10.0 5.0
    S'applique à <form> ? 13 (13) ? ? ?
    Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base (<input>) ? 4.0 (2) Pas de support 10.0 5.0
    S'applique à <form> ? 13 (13) ? ? ?

    Voir également

    Étiquettes et contributeurs liés au document

    Contributors to this page: tregagnon, teoli, FredB
    Dernière mise à jour par : tregagnon,