CSS3: pseudo-classe non selezionata


108

So che esiste una :checkedpseudo-classe CSS3 ufficiale , ma esiste una :uncheckedpseudo-classe e hanno lo stesso supporto per il browser?

Il riferimento di Sitepoint non ne menziona uno, tuttavia questa specifica whatwg (qualunque essa sia) fa.

So che lo stesso risultato può essere raggiunto quando le :checkede :not()pseudo-classi sono combinate, ma io sono ancora curioso:

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

Modificare:

Il w3c consiglia la stessa tecnica

Una casella di controllo deselezionata può essere selezionata utilizzando la pseudo-classe di negazione:

:not(:checked)

Risposte:


104

:unchecked non è definito nei selettori o nelle specifiche del livello 3 dell'interfaccia utente CSS, né è apparso nel livello 4 dei selettori.

In effetti, la citazione dal W3C è presa dalla specifica Selectors 4 . Poiché Selectors 4 consiglia di utilizzare :not(:checked), è lecito ritenere che non vi sia uno :uncheckedpseudo corrispondente . Il supporto del browser per :not()ed :checkedè identico, quindi non dovrebbe essere un problema.

Questo può sembrare incoerente con gli stati :enablede :disabled, soprattutto perché un elemento non può essere abilitato né disabilitato (cioè la semantica non si applica completamente), tuttavia non sembra esserci alcuna spiegazione per questa incoerenza.

( :indeterminatenon conta, perché allo stesso modo un elemento non può essere né deselezionato, né controllato né indeterminato perché la semantica non si applica.)


Solo per aggiungere a questa risposta che selezionando: not (: verificato) funziona perfettamente su Chrome, ma non su IE (testato su 9 e 11).
Bruno Finger

@Bruno Finger:: verificato e: non (: verificato) dovrebbero funzionare entrambi su IE, tranne per il fatto che entrambi sono ugualmente affetti da un bug in cui la modifica dello stato controllato non aggiorna gli stili degli elementi presi di mira in relazione a selezionato / deselezionato elemento.
BoltClock

35

Penso che tu stia cercando di complicare troppo le cose. Una soluzione semplice è semplicemente modellare la casella di controllo per impostazione predefinita con gli stili non selezionati e quindi aggiungere gli stili di stato selezionati.

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

Mi scuso per aver sollevato un vecchio thread, ma ho sentito che avrebbe potuto usare una risposta migliore.

EDIT (3/3/2016):

Le specifiche W3C lo indicano :not(:checked)come esempio per la selezione dello stato deselezionato. Tuttavia, questo è esplicitamente lo stato deselezionato e applicherà quegli stili solo allo stato deselezionato. Ciò è utile per aggiungere uno stile che è necessario solo nello stato deselezionato e dovrebbe essere rimosso dallo stato selezionato se utilizzato sul input[type="checkbox"]selettore. Vedere l'esempio di seguito per chiarimenti.

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
}

Senza usare :not(:checked)nell'esempio sopra, il :checkedselettore avrebbe dovuto usare a border: none;per ottenere lo stesso effetto.

Usa il input[type="checkbox"]per lo styling di base per ridurre la duplicazione.

Utilizzare gli input[type="checkbox"]:not(:checked)stili espliciti non selezionati che non si desidera applicare allo stato selezionato.


Ci sono altri usi dei selettori CSS in cui è utile / espressivo però: javascript, test automatizzato del browser
nruth

2
Questo non è sempre possibile. Gli elementi del modulo in particolare sono noti per non consentire di ripristinarli al loro aspetto predefinito tramite regole a cascata. (Anche se il motivo per cui qualcuno vorrebbe dare solo a input selezionati o non selezionati un aspetto personalizzato mentre lascia l'altra zecca è oltre me.)
BoltClock

Un altro caso in cui ciò non è possibile: più di 2 pulsanti di opzione. Ad esempio, potresti volere uno stile quando l'opzione n. 1 è: selezionata e un altro quando qualsiasi altra cosa è: selezionata. La soluzione è:not(:checked)
Navin

Se mancavano quelli specifici solo vogliono stile, perché non usare una :first-child, :last-childo :nth-childil selettore in combinazione con :checked. :not(:checked)non coprirà la situazione che hai specificato a meno che non abbia frainteso il tuo commento.
Michael Stramel

@MichaelStramel inserendo l'ordine degli html nel css?
no

3

Non esiste una pseudo classe: unchecked tuttavia, se si utilizza la pseudo classe: verificata e il selettore di pari livello, è possibile distinguere tra entrambi gli stati. Credo che tutti i browser più recenti supportino la pseudo classe: verificata, puoi trovare maggiori informazioni da questa risorsa: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Avrai un migliore supporto del browser con jquery ... puoi utilizzare una funzione di clic per rilevare quando si verifica il clic e se è selezionato o meno, puoi aggiungere una classe o rimuovere una classe secondo necessità ...


-2

Il modo in cui l'ho gestito è stato cambiare il className di un'etichetta in base a una condizione. In questo modo hai solo bisogno di un'etichetta e puoi avere classi diverse per stati diversi ... Spero che aiuti!

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.