|
|
Zverejnené 16. 5. 2019 11:10:41
|
|
|
|
Táto čistá CSS3 metóda skrášľovania rádiových tlačidiel funguje dobre v nasledujúcich situáciách:
1. Môže byť kompatibilný s IE9 a vyššími, a ak potrebuje byť kompatibilný s IE8, napíšte hack IE, ktorý odstráni tento štýl
2. Podporované je iba rádiové tlačidlo rádia, pretože kruh štýlu výberu tlačidla rádia je možné vytvoriť pomocou CSS, ale zaškrtávacie políčko na zaškrtávacom tlačidle vyžaduje knižnicu fontov obrázkov alebo ikon
3. Na podporu prepínacích efektov nie je potrebný žiadny JS
Obrázok nižšie je finálna vizualizácia:
HTML kód:
CSS kód:
Najdôležitejšie pri tejto metóde je vybrať názov triedy efektu: .radio input:checked + span.radio-on
+ je pseudotrieda CSS2, čo znamená, že div+p vyberá <div> všetky prvky bezprostredne po prvku <p> .
To znamená, že nájdite vybraný vstup (:zaškrtnuté) a potom použite prvok rozpätia nazvaný radio-on na vykonanie efektu vybraného kruhu.
Na internete existuje mnoho metód skrášľovania, ktoré umožňujú premeniť štítok na kruh, ale v tomto prípade musí byť text jedného výberu umiestnený mimo štítku, čo vedie k tomu, že pri kliknutí na text sa efekt jedného výberu nedá prepnúť.
Tak som na štítok pridal pás nazvaný radio-bg, aby som vytvoril veľký kruh vzadu, a potom som použil pás nazvaný radio-on, aby som vytvoril malý kruh na začiatku výberu.
Týmto spôsobom sa text v štítku zachováva a efekt jediného výberu je možné tiež prepínať.
Pripojené: jQuery používa metódu hodnôt vybraného rádia
var val=$('input:radio[name="sex"]:checked').val();
Priložte všetky tri metódy:
$('input:radio:checked').val();
$("input[type='radio]:checked").val();
$("input[name='rd']:checked").val();
|
Predchádzajúci:Ako použiť proxy IP na scraping dát, PHP crawler na scraping produktov AmazonuBudúci:Rozdiel medzi ajaxom, axiosom a fetchom
|
