mozilla
Your Search Results

    :checked

    Summary

    The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.

    Syntax

    element:checked { style properties }
    input:checked {
      margin-left: 25px;
      border: 1px solid blue;
    }
    

    Examples

    Example selectors

    /* any "checkable" element */
    :checked {
      width: 50px;
      height: 50px;
    }
    
    /* only radio elements */
    input[type="radio"]:checked {
      margin-left: 25px;
    }
    
    /* only checkbox elements */
    input[type="checkbox"]:checked {
      display: none;  
    }
    
    /* only option elements */
    option:checked {
      color: red;
    }
    
    input[type="radio"]:checked
    Represents all radio buttons on the page that are checked

     

    input[type="checkbox"]:checked
    Represents all checkboxes on the page that are checked
    option:checked
    Represents all select's options on the page that are selected
     

    Using hidden checkboxes in order to store some CSS boolean values

    The :checked pseudo-class applied to hidden checkboxes appended at the begin of your page could be employed in order to store some dynamic booleans to be used by a CSS rule. The following example shows how to hide/show some expandable elements simply clicking on a button (download this demo).

    <!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>
    

    Using hidden radioboxes in order to store some CSS boolean values

    You can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews. See this demo for a possible cue.

    Note: For an analogous effect, but based on :hover pseudo-class and without hidden radioboxes, see this demo, taken from the :hover page.

    Specifications

    Specification Status Comment
    WHATWG HTML Living Standard
    The definition of ':checked' in that specification.
    Living Standard No change.
    HTML5
    The definition of ':checked' in that specification.
    Recommendation Defines the semantic regarding HTML.
    Selectors Level 4
    The definition of ':checked' in that specification.
    Working Draft No change.
    CSS Basic User Interface Module Level 3
    The definition of ':checked' in that specification.
    Working Draft Link to Selectors Level 3.
    Selectors Level 3
    The definition of ':checked' in that specification.
    Recommendation Defines the pseudo-class, but not the associated semantic

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.0 3.1
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 2.1 1.0 (1.0) 9.0 9.5 3.1

     

    Document Tags and Contributors

    Contributors to this page:
    Last updated by: jsx,