Този чист CSS3 метод за украсяване на радио бутоните работи добре в следните ситуации:
1. Може да е съвместим с IE9 и по-нови, и ако трябва да е съвместим с IE8, да напишете хака на IE, за да премахнете стила
2. Поддържа се само радио с бутони, тъй като кръгът на стила на избор на бутон може да се направи с CSS, но квадратчето за отметка изисква библиотека с шрифтове с картинки или икони
3. Не е необходим JS за поддръжка на превключващи ефекти
Изображението по-долу е финалното рендериране:
HTML код:
CSS код:
Най-важното при този метод е да се избере името на класа на ефекта: .radio input:checked + span.radio-on
+ е псевдоклас на CSS2, което означава, че div+p избира <div> всички елементи веднага след <p> елемента .
Тоест, намери избрания вход (:отметнато) и след това използвай span елемента, наречен radio-on, за да направиш избрания кръгов ефект.
В интернет има много методи за разкрасяване, за да се направи етикетът кръг, но в този случай текстът за единичен избор трябва да бъде поставен извън етикета, което води до факта, че при кликване върху текста ефектът на единичния избор не може да бъде пременен.
Добавих обхват, наречен radio-bg, към етикета, за да направя големия кръг отзад, и използвах обхват, наречен radio-on, за да направя малкия кръг отпред на селекцията.
По този начин текстът в етикета се запазва, а ефектът от единичния избор също може да бъде превключван.
Приложено: jQuery използва метода на стойността на избраното радио
var val=$('input:radio[name="sex"]:checked').val();
Прикачете и трите метода:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
|
Публикувано в 16.05.2019 г. 11:10:41 ч.
|
|
|
|
