mozilla
Your Search Results

    :checked

    概要

    CSS の :checked 擬似クラス セレクタは、チェックされているか、on 状態にトグルされているすべての ラジオボタン<input type="radio">)、チェックボックス<input type="checkbox">)、オプションボタン<select> 内にある <option>)を表します。ユーザが要素をクリックするか、別の値を選択するとこの状態は変化し、:checked 擬似クラスはもうその要素ではなく、別の要素に適用されるでしょう。

    構文

    element:checked { style properties }

    セレクタの例

    /* "チェック可能な" 全要素 */
    :checked {
      width: 50px;
      height: 50px;
    }
    
    /* ラジオボタンのみ */
      input[type="radio"]:checked {
      margin-left: 25px;
    }
    
    /* チェックボックスのみ */
    input[type="checkbox"]:checked {
      display: none;  
    }
    
    /* オプションボタンのみ */
    option:checked {
      color: red;
    }
    
    input[type="radio"]:checked
    チェックされている、ページ内のすべてのラジオボタン
    input[type="checkbox"]:checked
    チェックされている、ページ内のすべてのチェックボックス
    option:checked
    選択状態の、ページ内のすべてのオプションボタン

    隠しチェックボックスに CSS の真偽値を保管する

    ページの始めに追加した隠しチェックボックスに:checked 擬似クラスを使うと、CSS ルールで使われる動的な真偽値の保管に使えます。次の例では、単にボタンをクリックするだけで展開可能な要素の表示・非表示を切り替える方法を示しています。

    このデモのダウンロード

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Expandable elements</title>
    <style>
    #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>
    

    隠しラジオボタンに CSS の真偽値を保管する

    隠しラジオボタンに :checked 擬似クラスを使って、例えば、プレビューをクリックしたときだけフルサイズの画像を表示するようなイメージギャラリーを作るのに使えます。このデモ で実装例をご覧ください。

    注記: 隠しラジオボックスを使わず、:hover 擬似クラスを使って類似機能を実現するには、 :hover ページにある このデモ をご覧ください。

    仕様

    仕様書 策定状況 コメント
    WHATWG HTML Living Standard Living Standard 変更なし
    HTML5 勧告候補 HTML に関連する意味論的な定義
    Selectors Level 4 草案 変更なし
    CSS Basic User Interface Module Level 3 草案 Selectors Level 3 にリンク
    Selectors Level 3 勧告 擬似クラスの定義。ただし意味論との結び付けはなし

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 1.0 1.0 (1.7 or earlier) 9.0 9.0 3.1
    機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート 2.1 1.0 (1.0) 9.0 9.5 3.1

     

    ドキュメントのタグと貢献者

    Contributors to this page: sosleepy, ethertank
    最終更新者: ethertank,
    サイドバーを隠す