CSS3: pseudo-classe deselezionata

So che esiste una pseudo-classe CSS3 :checked ufficiale, ma esiste una pseudo-classe :unchecked e hanno lo stesso supporto per browser?CSS3: pseudo-classe deselezionata

Sitepoint's reference non ne parla, tuttavia questo whatwg spec (qualunque cosa sia) lo fa.

so lo stesso risultato può essere raggiunto quando le :checked e :not() pseudo-classi sono combinate, ma io sono ancora curioso:

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

Edit:

Il W3C raccomanda lo stesso tecnica

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

fonte

2012-01-13 Web_Designer

Non c'è: classe pseudo incontrollato se si utilizza il: checked classe di pseudo e il selettore fratello è possibile distinguere tra i due stati. Credo che tutti gli ultimi browser supportino la pseudo classe verificata: puoi trovare maggiori informazioni da questa risorsa: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Stai andando per ottenere un migliore supporto del browser con jquery ... puoi usare una funzione click per rilevare quando il clic succede e se è selezionato o meno, allora puoi aggiungere una classe o rimuovere una classe, se necessario ...

fonte

2012-01-13 04:54:35

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

Infatti, la citazione da W3C è taken from the Selectors 4 spec. Dal I selettori 4 consigliano di utilizzare :not(:checked), si può presumere che non vi sia uno pseudo :unchecked corrispondente. Il supporto del browser per :not() e :checked è identico, quindi non dovrebbe essere un problema.

Questo può sembrare incompatibile con le :enabled e :disabled stati, soprattutto perché un elemento può essere né abilitata né disabilitata (cioè la semantica completamente non si applicano), tuttavia non sembra esserci alcuna spiegazione per questa incoerenza.

(:indeterminate non conta, perché un elemento può essere allo stesso modo non controllato, selezionato né indeterminato, perché la semantica non si applicano.)

fonte

2012-03-19 16:28:51 BoltClock

Solo per aggiungere a questa risposta che la selezione: non (: selezionata) funziona perfettamente su Chrome, ma non su IE (testato su 9 e 11). –

@Bruno Finger:: checked e: not (: checked) dovrebbero funzionare entrambi su IE, tranne che entrambi sono ugualmente colpiti da un bug in cui la modifica dello stato controllato non aggiorna gli stili degli elementi targetizzati in relazione al controllo/elemento non controllato. – BoltClock

Penso che si sta cercando di complicare le cose. Una soluzione semplice consiste semplicemente nello stile della 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 tirato su un vecchio thread ma sentivo che avrebbe potuto usare una risposta migliore.

EDIT (2016/03/03):

stato W3C Caratteristiche che :not(:checked) come loro esempio per la selezione dello stato incontrollato.Tuttavia, questo è esplicitamente lo stato non controllato e applicherà solo quegli stili allo stato deselezionato. Questo è utile per aggiungere uno stile che è necessario solo sullo stato deselezionato e che sarebbe necessario rimuovere dallo stato selezionato se usato nel selettore input[type="checkbox"]. Vedere l'esempio sotto 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 utilizzare :not(:checked) nell'esempio sopra il selettore :checked avrebbe bisogno di usare un border: none; per ottenere lo stesso effetto.

Utilizzare lo input[type="checkbox"] per lo stile di base per ridurre la duplicazione.

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

fonte

2015-05-21 16:34:38

Ci sono altri usi dei selettori CSS dove è utile/espressivo però: javascript, test automatico del browser – nruth

Questo non è sempre possibile. In particolare, gli elementi del modulo sono noti per non consentire di ripristinarli al loro aspetto predefinito tramite regole a cascata. (Anche se chiunque vorrebbe dare solo input controllati o solo non controllati ha un aspetto e una sensazione personalizzati mentre lascia l'altra zecca è oltre me.) – BoltClock

Un altro caso in cui questo non è possibile: più di 2 pulsanti di opzione. Ad esempio, potresti volere uno stile quando l'opzione # 1 è: selezionata e un'altra quando tutto il resto è: controllato. La soluzione è ': 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>

fonte

2016-07-02 13:34:22 zloctb

Il modo in cui ho gestito questo è stato il passaggio del 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 ti aiuti!

fonte

2017-06-12 22:10:07

risposta

Problemi correlati