Ren CSS3 forskjønner radioknappene

Lille skurk · Publisert på 16.05.2019 11:10:41

Denne rene CSS3-metoden for å forskjønne radioknapper fungerer godt i følgende situasjoner:

1. Det kan være kompatibelt med IE9 og nyere, og hvis det må være kompatibelt med IE8, skriv IEs hack for å fjerne stilen

2. Kun radioknapp-radio støttes, fordi sirkelen i radioknappens valg kan lages med CSS, men avkrysningsboksen krever et bilde- eller ikonskriftbibliotek

3. Ingen JS er nødvendig for å støtte switching-effekter

Bildet under er den endelige gjengivelsen:

HTML-kode:

Innlogging er synlig.

CSS-kode:

Innlogging er synlig.

Det viktigste i denne metoden er å velge klassenavnet på effekten: .radio input:checked + span.radio-on

+ er en pseudoklasse av CSS2, som betyr at div+p velger <div> alle elementene umiddelbart etter elementet <p> .

Det vil si, finn den valgte inngangen (:checked), og bruk deretter span-elementet kalt radio-on for å utføre den valgte sirkel-effekten.

Det finnes mange forskjønningsmetoder på Internett for å lage etiketten til en sirkel, men i dette tilfellet må den enkle markeringsteksten plasseres utenfor etiketten, noe som fører til at når man klikker på teksten, kan ikke den enkle utvalgseffekten byttes.

Så jeg la til et spenn kalt radio-bg på etiketten for å lage den store sirkelen bak, og brukte deretter et spenn kalt radio-on for å lage den lille sirkelen foran i utvalget.

På denne måten bevares teksten i etiketten, og effekten av enkelt utvalg kan også slås av.

Vedlagt: jQuery bruker verdimetoden til den valgte radioen

var val=$('input:radio[name="sex"]:checked').val();

Legg ved alle tre metodene:

$('input:radio:checked').val();

$("input[type='radio']:sjekket").val();

$("input[name='rd']:checked").val();

[CSS/DIV] Ren CSS3 forskjønner radioknappene

Relaterte innlegg

Seksjoner sett