CSS3: niezaznaczona pseudoklasa

108

Wiem, że istnieje oficjalna :checkedpseudoklasa CSS3 , ale czy istnieje :uncheckedpseudoklasa i czy mają taką samą obsługę przeglądarki?

Odniesienie do Sitepoint nie wspomina o jednym, jednak ta specyfikacja whatwg (cokolwiek to jest).

Wiem, że ten sam wynik można osiągnąć , łącząc klasy :checkedi :not()pseudoklasy, ale nadal jestem ciekawy:

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

Edytować:

W3c zaleca tę samą technikę

Niezaznaczone pole wyboru można zaznaczyć za pomocą pseudoklasy negacji:

:not(:checked)
Projektant stron internetowych
źródło

Odpowiedzi:

104

:unchecked nie jest zdefiniowany w specyfikacjach selektorów ani specyfikacji interfejsu użytkownika CSS poziomu 3, ani nie pojawił się na poziomie 4 selektorów.

W rzeczywistości cytat z W3C pochodzi ze specyfikacji Selectors 4 . Ponieważ Selectors 4 zaleca używanie :not(:checked), można bezpiecznie założyć, że nie ma odpowiedniego :uncheckedpseudo. Obsługa przeglądarek :not()i :checkedjest identyczna, więc nie powinno to stanowić problemu.

Może się to wydawać niezgodne ze stanami :enabledi :disabled, zwłaszcza, że ​​elementu nie można ani włączyć, ani wyłączyć (tj. Semantyka całkowicie nie ma zastosowania), jednak wydaje się, że nie ma żadnego wyjaśnienia tej niespójności.

( :indeterminatenie liczy się, ponieważ podobnie element nie może być odznaczony, sprawdzony ani nieokreślony, ponieważ semantyka nie ma zastosowania).

BoltClock
źródło
Wystarczy dodać do tej odpowiedzi, że wybranie: not (: selected) działa doskonale w Chrome, ale nie działa w IE (testowane na 9 i 11).
Bruno Finger
@Bruno Finger:: zaznaczone i: not (: zaznaczone) powinny działać w IE, z wyjątkiem tego, że oba są w równym stopniu dotknięte błędem, w którym zmiana stanu zaznaczenia nie aktualizuje stylów elementów docelowych w stosunku do zaznaczonych / niezaznaczonych element.
BoltClock
35

Myślę, że próbujesz zbytnio komplikować sprawy. Prostym rozwiązaniem jest domyślne ustawienie stylu pola wyboru przy użyciu niezaznaczonych stylów, a następnie dodanie zaznaczonych stylów stanu.

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

Przepraszam, że podniosłem stary wątek, ale czułem, że przydałaby się lepsza odpowiedź.

EDYCJA (03.03.2016):

Specyfikacje W3C podają, że :not(:checked)jako przykład wyboru stanu niezaznaczonego. Jest to jednak jawnie stan niezaznaczony i zastosuje te style tylko do stanu niezaznaczonego. Jest to przydatne do dodawania stylu, który jest potrzebny tylko w stanie niezaznaczonym i musiałby zostać usunięty ze stanu zaznaczonego, jeśli zostanie użyty na input[type="checkbox"]selektorze. Zobacz przykład poniżej dla wyjaśnienia.

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
}

Bez użycia :not(:checked)w powyższym przykładzie :checkedselektor musiałby użyć a, border: none;aby osiągnąć ten sam efekt .

Użyj input[type="checkbox"]do stylizacji bazowej, aby zredukować powielanie.

Użyj input[type="checkbox"]:not(:checked)dla jawnie niezaznaczonych stylów, których nie chcesz stosować do zaznaczonego stanu.

Michael Stramel
źródło
Istnieją jednak inne zastosowania selektorów css, w których jest to przydatne / wyraziste: javascript, automatyczne testowanie przeglądarki
nruth
2
Nie zawsze jest to możliwe. Zwłaszcza elementy formularzy są znane z tego, że nie pozwalają na przywrócenie ich do ich domyślnego wyglądu za pomocą reguł kaskadowych. (Chociaż dlaczego ktoś chciałby nadać tylko zaznaczonym lub tylko niezaznaczonym wejściom niestandardowy wygląd i styl, pozostawiając drugą mennicę, jest poza mną.)
BoltClock
Inny przypadek, w którym nie jest to możliwe: więcej niż 2 przyciski opcji. Na przykład możesz chcieć jednego stylu, gdy opcja 1 to: zaznaczone, a innego, gdy cokolwiek innego jest: zaznaczone. Rozwiązaniem jest:not(:checked)
Navin
Gdybyś chciał tylko tych, którzy chcą konkretnych stylu, dlaczego nie użyć :first-child, :last-childlub :nth-childwybierak w połączeniu z :checked. :not(:checked)nie omówię określonej przez Ciebie sytuacji, chyba że źle zrozumiem Twój komentarz.
Michael Stramel
@MichaelStramel umieszcza kolejność html w css? nie, dziękuję
inetphantom
3

Nie ma pseudoklasy: unchecked, jednak jeśli użyjesz pseudoklasy :Check i selektora rodzeństwa, możesz rozróżnić oba stany. Uważam, że wszystkie najnowsze przeglądarki obsługują pseudoklasę: Checked. Więcej informacji można znaleźć w tym źródle: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Otrzymasz lepszą obsługę przeglądarki dzięki jquery ... możesz użyć funkcji kliknięcia, aby wykryć, kiedy kliknięcie się dzieje i czy jest zaznaczone, czy nie, możesz dodać klasę lub usunąć ją w razie potrzeby ...

Jeff Wooden
źródło
-2

Sposób, w jaki sobie z tym poradziłem, polegał na zmianie nazwy klasy etykiety na podstawie warunku. W ten sposób potrzebujesz tylko jednej etykiety i możesz mieć różne klasy dla różnych stanów ... Mam nadzieję, że to pomoże!

Daniel Ram
źródło