Pure CSS3 прикрашає радіокнопки

Маленька покидька · Опубліковано 16.05.2019 11:10:41

Цей чистий метод CSS3 для прикрашання радіокнопок добре працює в таких ситуаціях:

1. Він може бути сумісним з IE9 і вище, а якщо потрібно бути сумісним з IE8, напишіть хак IE, щоб видалити цей стиль

2. Підтримується лише радіокнопкове радіо, оскільки коло стилю вибору кнопок можна створити за допомогою CSS, але для галочки потрібна бібліотека шрифтів зображень або іконок

3. JS не потрібен для підтримки ефектів перемикання

Зображення нижче — фінальне рендеринг:

HTML-код:

Вхід видно.

CSS-код:

Вхід видно.

Найважливіше в цьому методі — вибрати назву класу ефекту: .radio input:checked + span.radio-on

+ є псевдокласом CSS2, тобто div+p <div> вибирає всі елементи одразу після <p> елемента .

Тобто знайти вибраний вхід (:checked), а потім використати елемент 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();

[CSS/DIV] Pure CSS3 прикрашає радіокнопки

Пов'язані дописи

Переглянуті розділи