Šī tīrā CSS3 radio pogu izdaiļošanas metode labi darbojas šādās situācijās:
1. Tas var būt saderīgs ar IE9 un jaunāku, un, ja tam jābūt saderīgam ar IE8, uzrakstiet IE hack, lai noņemtu stilu
2. Tiek atbalstīts tikai radiopogas radio, jo radiopogas izvēles stila apli var izveidot ar CSS, bet izvēles rūtiņas izvēles rūtiņai ir nepieciešama attēlu vai ikonu fontu bibliotēka
3. Lai atbalstītu komutācijas efektus, nav nepieciešama JS
Zemāk redzamais attēls ir galīgais renderējums:
HTML kods:
CSS kods:
Vissvarīgākais šajā metodē ir izvēlēties efekta klases nosaukumu: .radio input:checked + span.radio-on
+ ir CSS2 pseidoklase, kas nozīmē, ka div+p atlasa <div> visus elementus tūlīt pēc elementa <p> .
Tas nozīmē, ka atrodiet atlasīto ievadi (:checked) un pēc tam izmantojiet span elementu ar nosaukumu radio-on, lai veiktu atlasīto apļa efektu.
Internetā ir daudz skaistumkopšanas metožu, lai etiķeti padarītu par apli, bet šajā gadījumā viens atlases teksts jānovieto ārpus etiķetes, kas noved pie tā, ka, noklikšķinot uz teksta, nevar pārslēgt vienu atlases efektu.
Tāpēc es pievienoju etiķetei span ar nosaukumu radio-bg, lai izveidotu lielo apli aizmugurē, un pēc tam izmantoju span ar nosaukumu radio-on, lai izveidotu mazo apli atlases priekšā.
Tādā veidā tiek saglabāts teksts etiķetē, un var pārslēgt arī vienas atlases efektu.
Pievienots: jQuery izmanto izvēlētā radio vērtības metodi
var val=$('input:radio[name="sex"]:checked').val();
Pievienojiet visas trīs metodes:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
|
Publicēts 16.05.2019 11:10:41
|
|
|
|
