130

:checked公式の CSS3疑似クラスがあることは知っていますが、:unchecked疑似クラスはありますか? また、それらは同じブラウザーをサポートしていますか?

Sitepoint のリファレンスには言及されていませんが、このwhatwg 仕様(それが何であれ) には言及されています。

:checkedと疑似クラスを組み合わせると同じ結果が得られることはわかっています:not()が、それでも興味があります。

input[type="checkbox"]:not(:checked) {
    /* styles */
}

編集：

w3c は同じ手法を推奨しています

チェックされていないチェックボックスは、否定疑似クラスを使用して選択できます。

:not(:checked)
4

4 に答える 4

124

:uncheckedセレクタまたは CSS UI レベル 3 仕様で定義されておらず、セレクタのレベル 4 にも表示されていません。

実際、W3C からの引用は Selectors 4 仕様から取られています。Selectors 4では の使用が推奨されているため、対応する疑似:not(:checked)はないと想定しても安全です。と:uncheckedのブラウザ サポートは同一であるため、問題にはなりません。:not():checked

これは、特に要素を有効にすることも無効にすることもできない (つまり、セマンティクスが完全に適用されない) ため、and の状態と:enabled矛盾しているように見えるかもしれませんが、この矛盾についての説明はないようです。:disabled

(:indeterminateセマンティクスが適用されないため、要素は同様にチェック解除、チェック、不確定のいずれにもならないため、カウントされません。)

于 2012-03-19T16:28:51.370 に答える
43

物事を過度に複雑にしようとしていると思います。簡単な解決策は、デフォルトでチェックボックスをチェックされていないスタイルでスタイルしてから、チェックされた状態のスタイルを追加することです。

input[type="checkbox"] {
  // Unchecked Styles
}
input[type="checkbox"]:checked {
  // Checked Styles
}

古いスレッドを立ち上げたことをお詫びしますが、より良い回答を使用できたように感じました。

編集 (2016 年 3 月 3 日):

W3C Specs:not(:checked)は、チェックされていない状態を選択するための例としてそれを述べています。ただし、これは明示的にチェックされていない状態であり、これらのスタイルはチェックされていない状態にのみ適用されます。input[type="checkbox"]これは、チェックされていない状態でのみ必要であり、セレクターで使用された場合はチェックされた状態から削除する必要があるスタイルを追加するのに役立ちます。明確にするために、以下の例を参照してください。

input[type="checkbox"] {
  /* Base Styles aka unchecked */
  font-weight: 300; // Will be overwritten by :checked
  font-size: 16px; // Base styling
}
input[type="checkbox"]:not(:checked) {
  /* Explicit Unchecked Styles */
  border: 1px solid #FF0000; // Only apply border to unchecked state
}
input[type="checkbox"]:checked {
  /* Checked Styles */
  font-weight: 900; // Use a bold font when checked
}

:not(:checked)上記の例でを使用しないと、:checkedセレクターはborder: none;同じ効果を得るために a を使用する必要がありました。

input[type="checkbox"]重複を減らすには、ベース スタイルに を使用します。

input[type="checkbox"]:not(:checked)チェックされた状態に適用したくない明示的なチェックされていないスタイルには、 を使用します。

于 2015-05-21T16:34:38.570 に答える
4

:unchecked 疑似クラスはありませんが、:checked 疑似クラスと兄弟セレクターを使用すると、両方の状態を区別できます。最新のブラウザはすべて :checked 疑似クラスをサポートしていると思います。詳細については、次のリソースを参照してください: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

jquery を使用すると、ブラウザのサポートが向上します...クリック機能を使用してクリックが発生したことを検出し、チェックされているかどうかを確認してから、必要に応じてクラスを追加または削除できます...

于 2012-01-13T04:54:35.770 に答える