|
|
Опубликовано 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> элемента .
То есть найдите выбранный вход (:отмечено), а затем используйте элемент 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();
|
Предыдущий:Как использовать прокси-IP для скрапинга данных, PHP-краулер для скрейпинга данных о продуктах AmazonСледующий:Разница между ajax, axios и fetch
|
