Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

Input selectors

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

フォーム状態セレクター

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:checked
1
12
1
3.1
18
2
その他
css.selectors.disabled

`:無効`
1
12
1
3.1
18
2
css.selectors.enabled

`:有効`
1
12
1
3.1
18
2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • macOS では、`<option>` 要素のスタイルを設定しても効果がありません。
注釈 1件
実装メモ
  • macOS では、`<option>` 要素のスタイルを設定しても効果がありません。
注釈 2件
実装メモ
  • Firefox 56 以降、`<option>` 要素はスタイル設定できません。
  • macOS では、`<option>` 要素のスタイルを設定しても効果がありません。
注釈 1件
実装メモ
  • `<option>` 要素のスタイルを設定しても効果はありません。
注釈 1件
実装メモ
  • `<option>` 要素のスタイルを設定しても効果はありません。
注釈 1件
実装メモ
  • Edge 79 より前では、Edge は `<fieldset>` 要素の `:disabled` を認識しませんでした。

基本構文

CSS 
input:checked {
  accent-color: blue;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

ライブデモ

:checked

CSS:checked demo.

プレビュー全画面表示

:disabled

CSS:disabled demo.

プレビュー全画面表示

:focus-within

CSS:focus-within demo.

プレビュー全画面表示

実務での使いどころ

  • フォーム要素の状態別スタイリング

    チェック済みのチェックボックスにアクセントカラーを適用し、無効化されたボタンをグレーアウトして操作不可であることを示します。

注意点

  • :checkedはチェックボックス、ラジオボタン、option要素にのみ適用されます。テキスト入力フィールドには効果がありません。

アクセシビリティ

  • :disabledで視覚的に無効化された要素が、スクリーンリーダーでも正しく無効状態として認識されることを確認してください。

参考リンク