Tämä puhdas CSS3-menetelmä radiopainikkeiden kaunistamiseen toimii hyvin seuraavissa tilanteissa:
1. Se voi olla yhteensopiva IE9:n ja sitä uudempien kanssa, ja jos sen täytyy olla yhteensopiva IE8:n kanssa, kirjoita IE:n hack poistaaksesi tyylin
2. Vain radionappiradio on tuettu, koska radiopainikkeen valintatyylin ympyrä voidaan tehdä CSS:llä, mutta valintanapin valintaruutu vaatii kuva- tai kuvakefonttikirjaston
3. JS:ää ei vaadita kytkentävaikutusten tukemiseksi
Alla oleva kuva on lopullinen renderöinti:
HTML-koodi:
CSS-koodi:
Tärkein asia tässä menetelmässä on valita efektin luokkanimi: .radio input:checked + span.radio-on
+ on CSS2:n pseudoluokka, mikä tarkoittaa, että div+p <div> valitsee kaikki alkiot heti alkion <p> jälkeen .
Eli etsi valittu syöte (:checked) ja käytä sitten radio-on-nimistä span-elementtiä valitun ympyräefektin tekemiseen.
Internetissä on monia kaunistusmenetelmiä, joilla tunnisteesta tehdään ympyrä, mutta tässä tapauksessa yksittäinen valintateksti täytyy sijoittaa etiketin ulkopuolelle, mikä johtaa siihen, että tekstiä klikatessa yksittäistä valintaefektiä ei voi vaihtaa.
Lisäsin etikettiin radio-bg-nimisen kaaren tehdäkseni suuren ympyrän takana, ja käytin sitten radio-on-nimistä saraa pienen ympyrän tekemiseen valinnan etuosassa.
Näin etiketin teksti säilyy, ja yksittäisen valinnan vaikutusta voidaan myös kytkeä päälle.
Liitteenä: jQuery ottaa valitun radion arvomenetelmän
var val=$('input:radio[name="sex"]:checked').val();
Liitä kaikki kolme menetelmää:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
|
Julkaistu 16.5.2019 11.10.41
|
|
|
|
