Tato čistá metoda CSS3 pro zkrášlení tlačítek rádia funguje dobře v následujících situacích:
1. Může být kompatibilní s IE9 a vyššími, a pokud je potřeba být kompatibilní s IE8, napsat IEův hack, který odstraní tento styl
2. Podporováno je pouze rádio s tlačítky, protože kruh výběru tlačítka lze vytvořit pomocí CSS, ale zaškrtávací políčko na zaškrtávací políčku vyžaduje knihovnu fontů obrázků nebo ikon
3. Pro podporu přepínání není potřeba žádný JS
Obrázek níže je finální renderování:
HTML kód:
CSS kód:
Nejdůležitější v této metodě je zvolit název třídy efektu: .radio input:checked + span.radio-on
+ je pseudotřída CSS2, což znamená, že div+p vybírá <div> všechny prvky bezprostředně po prvku <p> .
To znamená, že najděte vybraný vstup (:zaškrtnuto) a poté použijete prvek rozpětí nazvaný radio-on k provedení efektu vybraného kruhu.
Na internetu existuje mnoho metod zkrášlování, jak proměnit štítek do kruhu, ale v tomto případě musí být text jednoho výběru umístěn mimo štítek, což vede k tomu, že při kliknutí na text nelze jediný výběrový efekt přepnout.
Takže jsem přidal na štítek pás nazvaný radio-bg, abych vytvořil velký kruh vzadu, a pak jsem použil rozpětí nazvaný radio-on, abych vytvořil malý kruh na začátku výběru.
Tímto způsobem je text v štítku zachován a efekt jediného výběru lze také přepnout.
Připojeno: jQuery používá metodu hodnoty vybraného rádia
var val=$('input:radio[name="sex"]:checked').val();
Přiložte všechny tři metody:
$('input:radio:checked').val();
$("input[type='radio]:checked").val();
$("input[name='rd']:checked").val();
|
Zveřejněno 16.05.2019 11:10:41
|
|
|
|
