開発者ドキュメント

CSS:checked Pseudo-Class Selector

:checkedは、ラジオ、チェックボックス、またはオプション要素のチェック状態のスタイルを設定するために使用される疑似クラスセレクターです。

:checked {
  background-color: hotpink;
}

/* Only style checked checkboxes */
input[type="checkbox"]:checked {
  padding-left: 1em;
}

チェックされていない要素の明示的なスタイリング

:checkedで:not pseudo-classを使用して、チェックされていない要素を明示的にスタイル設定できます。 これは、チェックされた状態に適用されたくない特定のスタイルがある場合に役立ちます。

input:not(:checked) {
  opacity: 0.6;
}

ブラウザのサポート

css-sel3を使用できますか? caniuse.comの主要なブラウザーでのcss-sel3機能のサポートに関するデータ。

モバイルバージョンを終了