Ez a tiszta CSS3 módszer a rádiógombok szépítésére a következő helyzetekben működik:
1. Kompatibilis lehet az IE9-cel és annál magasabb, és ha kompatibilisnek kell lennie az IE8-cal, írd meg az IE hackjét, hogy eltávolítsd a stílust
2. Csak a rádiógombos rádió támogatott, mert a rádiógomb választási stílus körét CSS-szel lehet létrehozni, de a pipa gomb jelölőnégyzet jelölőnégyzetéhez kép- vagy ikonbetű-könyvtár szükséges
3. A kapcsolási effektek támogatásához nincs szükség JS-re
Az alábbi kép a végső renderelés:
HTML kód:
CSS kód:
A legfontosabb ebben a módszerben, hogy kiválasztjuk az effekt osztálynevét: .radio input:checked + span.radio-on
+ a CSS2 pszeudoosztálya, ami azt jelenti, hogy a div+p <div> minden elemet kiválaszt közvetlenül az <p> elem után.
Vagyis megtaláld a kiválasztott bemenetet (:checked), majd használd a radio-on nevű span elemet a kiválasztott körhatás eléréséhez.
Az interneten számos szépítési módszer létezik arra, hogy a címkét körbe alakítsuk, de ebben az esetben az egyetlen kiválasztási szöveget a címkén kívül kell helyezni, ami miatt a szövegre kattintáskor az egyetlen kiválasztási hatás nem váltható meg.
Ezért hozzáadtam egy radio-bg nevű spant a címkéhez, hogy a hátulján lévő nagy kört készítsem, majd egy radio-on nevű szakaszt használtam, hogy elkészítsem a kis kört a válogatás elején.
Így megőrzi a címkén lévő szöveget, és az egyetlen szelekció hatása is kapcsolható.
Csatolva: a jQuery a kiválasztott rádió érték módszerét veszi
var val=$('input:radio[name="sex"]:checked').val();
Csatolja mindhárom módszert:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
|
Közzétéve 2019. 05. 16. 11:10:41
|
|
|
|
