Ren CSS3 förskönar radioknapparna

Lilla avskum · Publicerad på 2019-05-16 11:10:41

Denna rena CSS3-metod för att försköna radioknappar fungerar bra i följande situationer:

1. Den kan vara kompatibel med IE9 och uppåt, och om den behöver vara kompatibel med IE8, skriv IE:s hack för att ta bort stilen

2. Endast radioknappsradio stöds, eftersom cirkeln i radioknappsvalsstilen kan göras med CSS, men kryssrutan för kryssrutan kräver ett bild- eller ikontypsnittsbibliotek

3. Ingen JS krävs för att stödja switch-effekter

Bilden nedan är den slutgiltiga renderingen:

HTML-kod:

Inloggningen är synlig.

CSS-kod:

Inloggningen är synlig.

Det viktigaste i denna metod är att välja klassnamnet på effekten: .radio input:checked + span.radio-on

+ är en pseudoklass av CSS2, vilket betyder att div+p väljer <div> alla element omedelbart efter elementet <p> .

Det vill säga, hitta den valda inmatningen (:checked), och använd sedan spanelementet radio-on för att göra den valda cirkeleffekten.

Det finns många försköningsmetoder på internet för att göra etiketten till en cirkel, men i detta fall måste den enkla urvalstexten placeras utanför etiketten, vilket leder till att när man klickar på texten kan den enkla urvalseffekten inte bytas.

Så jag lade till ett spann som heter radio-bg på etiketten för att skapa den stora cirkeln på baksidan, och använde sedan ett spann som heter radio-on för att göra den lilla cirkeln längst fram i urvalet.

På detta sätt bevaras texten i etiketten, och effekten av enkelval kan också växlas.

Bifogat: jQuery använder värdemetoden för den valda radion

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

Bifoga alla tre metoder:

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

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

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

[CSS/DIV] Ren CSS3 förskönar radioknapparna

Relaterade inlägg

Avsnitt som ses