Questo metodo puro CSS3 per abbellire i pulsanti radio funziona bene nelle seguenti situazioni:
1. Può essere compatibile con IE9 e superiori, e se deve essere compatibile con IE8, scrivi l'hack di IE per rimuovere lo stile
2. È supportata solo la radio con pulsante radio, perché il cerchio dello stile di selezione dei tasti radio può essere creato con CSS, ma la casella di selezione per tasti di selezione richiede una libreria di font di immagini o icone
3. Non è necessario JS per supportare gli effetti di commutazione
L'immagine qui sotto è la versione finale:
Codice HTML:
Codice CSS:
La cosa più importante in questo metodo è selezionare il nome della classe dell'effetto: .radio input:checked + span.radio-on
+ è una pseudoclasse di CSS2, il che significa che div+p seleziona <div> tutti gli elementi immediatamente dopo <p> l'elemento .
Cioè, trovare l'input selezionato (:checked), e poi usare l'elemento span chiamato radio-on per eseguire l'effetto cerchio selezionato.
Esistono molti metodi di abbellimento su Internet per trasformare l'etichetta in un cerchio, ma in questo caso il testo di selezione singolo deve essere posizionato fuori dall'etichetta, il che porta al fatto che, cliccando sul testo, l'effetto di selezione unica non può essere cambiato.
Così ho aggiunto una campata chiamata radio-bg all'etichetta per creare il grande cerchio sul retro, e poi ho usato una campata chiamata radio-on per creare il piccolo cerchio davanti alla selezione.
In questo modo, il testo nell'etichetta viene preservato e l'effetto della singola selezione può essere anche attivato.
Allegato: jQuery prende il metodo dei valori della radio selezionata
var val=$('input:radio[nome="sesso"]:checked').val();
Allega tutti e tre i metodi:
$('input:radio:checked').val();
$("input[type='radio']checked").val();
$("input[name='rd']:checked").val();
|
Pubblicato su 16/05/2019 11:10:41
|
|
|
|
