Wiem, że istnieje oficjalna :checked
pseudoklasa CSS3 , ale czy istnieje :unchecked
pseudoklasa 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 :checked
i :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)
źródło
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.
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 nainput[type="checkbox"]
selektorze. Zobacz przykład poniżej dla wyjaśnienia.Bez użycia
:not(:checked)
w powyższym przykładzie:checked
selektor 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.źródło
:not(:checked)
:first-child
,:last-child
lub:nth-child
wybierak w połączeniu z:checked
.:not(:checked)
nie omówię określonej przez Ciebie sytuacji, chyba że źle zrozumiem Twój komentarz.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 ...
źródło
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!
źródło