:checked

CSS:checked 疑似クラスセレクターは、ラジオボタン<input type="radio">)、 チェックボックス<input type="checkbox">)、 オプションボタン<select> の中の <option>)要素がチェックされていたり on の状態にあったりすることを表します。

/* すべての選択中のラジオボタン、チェックボックス、オプションボタン */
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。

メモ: ブラウザ―は <option>置換要素として扱うことが多いので、 :checked 疑似クラスでスタイルが適用される部分の大きさはブラウザ―によって異なります。

構文

:checked

基本的な例

HTML

<div>
  <input type="radio" name="my-input" id="yes">
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no">
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in">
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>

CSS

div,
select {
  margin: 8px;
}

/* チェックが入った入力のラベル */
input:checked + label {
  color: red;
}

/* チェックが入ったラジオボタン */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* チェックが入ったチェックボックス */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* 選択されたオプション */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

結果

非表示のチェックボックスの要素を切り替え

この例では、 :checked 疑似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えができるようにします。 JavaScript はまったく使っていません。

HTML

<input type="checkbox" id="expand-toggle" />

<table>
  <thead>
    <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
  </thead>
  <tbody>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more 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>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
  </tbody>
</table>

<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>

CSS

/* トグルチェックボックスを隠す */
#expand-toggle {
  display: none;
}

/* 開く要素は既定で隠す */
.expandable {
  visibility: collapse;
  background: #ddd;
}

/* ボタンにスタイルを適用 */
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}

/* チェックボックスをチェックしたときに隠しコンテンツを表示 */
#expand-toggle:checked ~ * .expandable {
  visibility: visible;
}

/* チェックボックスがチェックされていたらボタンにスタイルを適用 */
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}

結果

画像ギャラリー

:checked 疑似クラスを使って、ユーザーがサムネイルをクリックしたときだけフルサイズの画像が表示される画像ギャラリーを構築できます。実行してみるにはこのデモを参照してください。

メモ: 似たような効果で、 :hover 疑似クラスを使用して隠しラジオボタンを使わないものについては、 :hover のリファレンスページからのこのデモを参照してください。

仕様書

仕様書 策定状況 コメント
HTML Living Standard
:checked の定義
現行の標準 変更なし。
HTML5
:checked の定義
勧告 HTML に関する意味を定義。
Selectors Level 4
:checked の定義
草案 変更なし。
CSS Basic User Interface Module Level 3
:checked の定義
勧告 Selectors Level 3 にリンク。
Selectors Level 3
:checked の定義
勧告 疑似クラスを定義、但し意味の結びつけの定義はなし

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:checkedChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 9Safari 完全対応 3.1WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応