CSS3: niezaznaczona pseudoklasa

Wiem, że istnieje oficjalna pseudo-klasa CSS3 :checked, ale czy istnieje pseudo-klasa :unchecked i czy mają one tę samą obsługę przeglądarki?CSS3: niezaznaczona pseudoklasa

Sitepoint's reference nie wspomina o jednym, jednak ten whatwg spec (cokolwiek to jest) robi.

wiem, że taki sam efekt można osiągnąć, gdy Pseudoklasy :checked i :not() są połączone, ale nadal jestem ciekaw:

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

Edit:

W3C zaleca to samo technika

Niezaznaczone pole wyboru można wybrać za pomocą pseudoklasy negacji:
:not(:checked) 

Źródło

2012-01-13 Web_Designer

Nie ma: zaznaczona klasa pseudo jednak jeśli użyć: sprawdzone klasy pseudo i selektor rodzeństwa można różnicować między obu państwami. Wierzę, że wszystkie najnowsze przeglądarki obsługują: sprawdzoną pseudo klasę, możesz znaleźć więcej informacji z tego zasobu: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Będziesz mieć lepszą obsługę przeglądarki z jquery ... możesz użyć funkcji kliknięcia, aby wykryć, kiedy kliknięcie dzieje się i jeśli jest zaznaczone, można dodać klasę lub usunąć klasę w razie potrzeby ...

Źródło

2012-01-13 04:54:35

:unchecked nie jest zdefiniowany w specyfikacjach selektora lub interfejsu CSS na poziomie 3 ani nie pojawił się na poziomie 4 Selektory.

Rzeczywiście, cytatem z W3C jest taken from the Selectors 4 spec. Od selektorów 4 zaleca korzystanie z :not(:checked), można bezpiecznie założyć, że nie ma odpowiedniej pseudo :unchecked. Obsługa przeglądarki dla :not() i :checked jest identyczna, więc nie powinno to stanowić problemu.

Może się to wydawać sprzeczne z :enabled i :disabled stanach, zwłaszcza, że element może być ani włączone ani wyłączone (czyli semantyka zupełnie nie stosuje się), ale tam nie wydaje się, aby wyjaśnieniem tej rozbieżności.

(:indeterminate nie liczy, ponieważ element może podobnie być ani zaznaczona, sprawdzane ani nieokreślone ponieważ semantyka nie obowiązują.)

Źródło

2012-03-19 16:28:51 BoltClock

Wystarczy, że dodasz do tej odpowiedzi, że wybranie: not (: checked) działa idealnie w Chrome, ale nie działa na IE (testowane na 9 i 11). –

@Bruno Finger:: zaznaczone i: nie (: zaznaczone) powinny pracować na IE, z wyjątkiem sytuacji, gdy oba mają taki sam wpływ na błąd, w którym zmiana statusu sprawdzanego nie aktualizuje stylów elementów docelowych w stosunku do sprawdzanego/niezaznaczony element. – BoltClock

myślę, że starają się nad komplikować. Prostym rozwiązaniem jest domyślne zaznaczenie pola wyboru przy użyciu niezaznaczonych stylów, a następnie dodanie sprawdzonych stylów stanu.

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

Przepraszam, że wychowałem stary wątek, ale czułem, że mógłbym użyć lepszej odpowiedzi.

EDIT (03.03.2016):

stan W3C Specs że :not(:checked) jako ich przykład wybierając stan niezaznaczone.Jest to jednak wyraźnie niezaznaczony stan i zastosuje tylko te style do niezaznaczonego stanu. Jest to przydatne do dodawania stylów, które są potrzebne tylko w niezaznaczonym stanie i wymagałyby usunięcia ze stanu zaznaczonego, jeśli są używane w selektorze input[type="checkbox"]. Zobacz przykład poniżej w celu 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 przykładzie powyżej selektora :checked musiałby użyć border: none; w celu osiągnięcia tego samego efektu.

Użyj stylu input[type="checkbox"] do stylizacji bazy, aby zmniejszyć duplikację.

Skorzystaj z input[type="checkbox"]:not(:checked) dla jawnych niezaznaczonych stylów, których nie chcesz zastosować do zaznaczonego stanu.

Źródło

2015-05-21 16:34:38

Istnieją inne zastosowania selektorów css, w których jest to przydatne/ekspresyjne: javascript, automatyczne testowanie przeglądarki – nruth

Nie zawsze jest to możliwe. Zwłaszcza elementy formularzy są znane z tego, że nie pozwalają na przywrócenie ich domyślnego wyglądu i sposobu działania za pomocą reguł kaskadowych. (Chociaż dlaczego ktokolwiek chciałby nadać tylko zaznaczone lub tylko niezaznaczone wejścia niestandardowy wygląd i czuć pozostawiając inną miętę jest poza mną.) – BoltClock

Kolejny przypadek, w którym nie jest to możliwe: Więcej niż 2 przyciski radiowe. Na przykład możesz chcieć jednego stylu, gdy opcja nr 1 jest: zaznaczona, a druga, gdy cokolwiek innego jest: zaznaczone. Rozwiązaniem jest ': not (: checked)' – Navin

-1

<style> 

input, span { 
    background: red; 
} 

:indeterminate, :indeterminate + span { 
    background: limegreen; 
} 
</style> 

</head> 

<body> 

<input type="checkbox"> <span>Everything in this paragraph should have a green background.</span> 


<script type="text/javascript"> 
    document.getElementsByTagName("input")[0].indeterminate = true; 
</script>

Źródło

2016-07-02 13:34:22 zloctb

Sposób w jaki to zrobiłem to zmiana 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 ... Nadzieję, że pomaga!

Źródło

2017-06-12 22:10:07

CSS3: niezaznaczona pseudoklasa

Odpowiedz

Powiązane problemy