mozilla
Vos résultats de recherche

    :checked

    Résumé

    La pseudo-classe CSS :checked représente les éléments radio (<input type="radio">), les cases à cocher (<input type="checkbox">) ou les (<option> dans <select>), qui sont cochés ou dans un état activé. L'utilisateur peut changer l'état en cliquant sur l'élément ou en sélectionnant une valeur différente, dans ce cas, :checked ne s'applique plus à l'élément.

    Syntaxe

    element:checked { propriétés CSS }
    
    input:checked {
      margin-left: 25px;
      border: 1px solid blue;
    }
    

    Exemples

    Exemples de sélecteurs

    /* tout élément "cochables" */
    :checked {
      width: 50px;
      height: 50px;
    }
    
    /* seulement les éléments radio */
      input[type="radio"]:checked {
      margin-left: 25px;
    }
    
    /* seulement les cases à cocher */
    input[type="checkbox"]:checked {
      display: none;  
    }
    
    /* seulement les options activées */
    option:checked {
      color: red;
    }
    
    input[type="radio"]:checked
    Représente tous les boutons radios de la page qui sont cochés

    input[type="checkbox"]:checked
    Représente toutes les cases à cocher de la page qui sont cochées
    option:checked
    Représente toutes les <option> sélectionnées dans des <select> .

    Utilisez des cases à cocher cachées pour stocker des valeurs CSS booléennes

    La pseudo-classe :checked appliquée à des cases à cocher cachées, insérées au début de la page, peuvent être utilisées afin de stocker des booléens dynamique utilisables depuis une règle CSS. L'exemple suivant montre comment montrer/cacher des éléments agrandissables en cliquant simplement sur un bouton.

    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Expandable elements</title>
    <style type="text/css">
    #expand-btn {
        margin: 0 3px;
        display: inline-block;
        font: 12px / 13px "Lucida Grande", sans-serif;
        text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
        padding: 3px 6px;
        border: 1px solid rgba(0, 0, 0, 0.6);
        background-color: #969696;
        cursor: default;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
        -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
        box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
    }
    
    #isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
        background: #B5B5B5;
        -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
        -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
        box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
    }
    
    #isexpanded, .expandable {
        display: none;
    }
    
    #isexpanded:checked ~ * tr.expandable {
        display: table-row;
        background: #cccccc;
    
    }
    
    #isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
        display: block;
        background: #cccccc;
    }
    </style>
    </head>
    <body>
    
    <input type="checkbox" id="isexpanded" />
    
    <h1>Expandable elements</h1>
    <table>
        <thead>
            <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
        </thead>
        <tbody>
            <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
            <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
            <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
            <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
            <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        </tbody>
    </table>
    
    <p>[some sample text]</p>
    <p><label for="isexpanded" id="expand-btn">Show hidden elements</label></p>
    <p class="expandable">[another sample text]</p>
    <p>[some sample text]</p>
    </body>
    </html>

    ScreenshotLive sample

    Utilisez des boutons radios masqués pour stocker des valeurs CSS booléennes

    Vous pouvez également utiliser la pseudo-classe :checked sur des boutons radios afin de réaliser, par exemple, une gallerie d'images en plein format qui n'apparaissent que lorsque le pointeur cliquer sur les aperçus. Regardez cette démonstration pour exemple.

    Note: pour un effet similaire, mais s'appuyant sur la pseudo-classe :hover et sans boutons radios masqués, veuillez vous référez à cette démonstration, extraite de la page :hover.

    Spécifications

    Spécification Statut Commentaire
    WHATWG HTML Living Standard
    La définition de ':checked' dans cette spécification.
    Standard évolutif Aucune modification.
    HTML5
    La définition de ':checked' dans cette spécification.
    Recommendation Défini la sémantique concernant HTML.
    Selectors Level 4
    La définition de ':checked' dans cette spécification.
    Version de travail Aucune modification.
    CSS Basic User Interface Module Level 3
    La définition de ':checked' dans cette spécification.
    Version de travail Lié à Selectors Level 3.
    Selectors Level 3
    La définition de ':checked' dans cette spécification.
    Recommendation Défini la pseudo-classe, mais pas son association sémantique.

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support de base 1.0 1.0 (1.7 ou moins) 9.0 9.0 3.1
    Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base 2.1 1.0 (1.0) 9.0 9.5 3.1

     

    Étiquettes et contributeurs liés au document

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