Această metodă pură CSS3 de înfrumusețare a butoanelor radio funcționează bine în următoarele situații:
1. Poate fi compatibil cu IE9 și versiunile superioare, iar dacă trebuie să fie compatibil cu IE8, scrie hack-ul IE pentru a elimina stilul
2. Doar butonul radio este suportat, deoarece cercul stilului de selecție al butoanelor radio poate fi creat cu CSS, dar bifatul pentru butonul de bifat necesită o bibliotecă de fonturi de imagine sau pictograme
3. Nu este necesar JS pentru a suporta efecte de comutare
Imaginea de mai jos este randarea finală:
Cod HTML:
Cod CSS:
Cel mai important lucru în această metodă este să selectezi numele clasei efectului: .radio input:checked + span.radio-on
+ este o pseudoclasă a lui CSS2, ceea ce înseamnă că div+p selectează <div> toate elementele imediat după <p> elementul .
Adică, găsești intrarea selectată (:checked), apoi folosești elementul span numit radio-on pentru a face efectul de cerc selectat.
Există multe metode de înfrumusețare pe Internet pentru a transforma eticheta într-un cerc, dar în acest caz, textul de selecție trebuie plasat în afara etichetei, ceea ce duce la faptul că, atunci când faci clic pe text, efectul de selecție unică nu poate fi schimbat.
Așa că am adăugat o deschidere numită radio-bg pe etichetă pentru a face cercul mare din spate, apoi am folosit o deschidere numită radio-on pentru a face cercul mic în fața selecției.
Astfel, textul din etichetă este păstrat, iar efectul unei singure selecții poate fi de asemenea comutat.
Atașat: jQuery ia metoda valorii radioului selectat
var val=$('input:radio[name="sex"]:checked').val();
Atașează toate cele trei metode:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
|
Postat pe 16.05.2019 11:10:41
|
|
|
|
