Pure CSS3 maakt radioknoppen mooier

Klein tuig · Geplaatst op 16-05-2019 11:10:41

Deze pure CSS3-methode om radioknoppen te verfraaien werkt goed in de volgende situaties:

1. Het kan compatibel zijn met IE9 en hoger, en als het compatibel moet zijn met IE8, schrijf dan IE's hack om de stijl te verwijderen

2. Alleen radioknopradio wordt ondersteund, omdat de cirkel van de radioknopselectiestijl met CSS kan worden gemaakt, maar het selectievakje voor de selectieknop vereist een afbeeldings- of icoonfontbibliotheek

3. Er is geen JS nodig om switch-effecten te ondersteunen

De onderstaande afbeelding is de definitieve weergave:

HTML-code:

Inloggen is zichtbaar.

CSS-code:

Inloggen is zichtbaar.

Het belangrijkste in deze methode is om de klassenaam van het effect te selecteren: .radio input:checked + span.radio-on

+ is een pseudoklasse van CSS2, wat betekent dat div+p <div> alle elementen direct na het element <p> selecteert.

Dat wil zeggen, zoek de geselecteerde invoer (:checked), en gebruik dan het span-element genaamd radio-on om het geselecteerde cirkeleffect uit te voeren.

Er zijn veel verfraaiingsmethoden op internet om het label tot een cirkel te maken, maar in dit geval moet de enkele selectietekst buiten het label worden geplaatst, wat ertoe leidt dat het enkele selectie-effect niet kan worden omgeschakeld wanneer je op de tekst klikt.

Dus voegde ik een span genaamd radio-bg toe aan het label om de grote cirkel aan de achterkant te maken, en gebruikte daarna een span genaamd radio-on om de kleine cirkel aan de voorkant van de selectie te maken.

Op deze manier wordt de tekst in het label behouden en kan het effect van enkele selectie ook worden aangetast.

Bijgevoegd: jQuery gebruikt de waardemethode van de geselecteerde radio

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

Voeg alle drie de methoden toe:

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

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

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

[CSS/DIV] Pure CSS3 maakt radioknoppen mooier

Gerelateerde berichten

Secties bekeken