Изменение внешнего вида чекбоксов и радио-кнопок с помощью CSS
Изменение внешнего вида для радио-кнопок с помощью CSS
CSS для радио-кнопок
/* Customize the label (the container) */ .input-wrap < display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >/* Hide the browser’s default radio button */ .input-wrap input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >/* Create a custom radio button */ .checkmark < position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; >/* On mouse-over, add a grey background color */ .input-wrap:hover input ~ .checkmark < background-color: #ccc; >/* When the radio button is checked, add a blue background */ .input-wrap input:checked ~ .checkmark < background-color: #2196F3; >/* Create the indicator (the dot/circle — hidden when not checked) */ .checkmark:after < content: ""; position: absolute; display: none; >/* Show the indicator (dot/circle) when checked */ .input-wrap input:checked ~ .checkmark:after < display: block; >/* Style the indicator (dot/circle) */ .input-wrap .checkmark:after
Как поменять цвет input type radio
Предположим, есть такой код, как в нем сделать ободку кнопки синей и при нажатии в центре тоже синий был.
input[type='radio'], label < cursor: pointer; >input[type='radio']
Отслеживать
задан 27 июн 2018 в 19:19
user260881 user260881
Никак, делайте кастомный radio через псевдоелемент или просто елемент.
27 июн 2018 в 19:30
27 июн 2018 в 19:37
да, такой способ тоже вижу первый раз, попробую применить, благодарю за идею!
22 апр 2023 в 14:58
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Разве что только кастомный, с помощью псевдоэлементов:
input[type='radio'], label < cursor: pointer; >input[type='radio'] < position: relative; height: 22px; width: 22px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; >input[type='radio']::before < content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); background-color: white; border: 2px solid dodgerblue; >input[type='radio']:checked::after
Отслеживать
ответ дан 27 июн 2018 в 19:31
4,572 3 3 золотых знака 17 17 серебряных знаков 53 53 бронзовых знака
Как изменить цвет активной радио-кнопки?
А о какой части кнопки речь? Там есть три различных элемента.
Окружность, изображающая кнопку:
.mdl-radio .mdl-radio__button:checked ~ .mdl-radio__outer-circle
Маркер, обозначающий активную кнопку:
.mdl-radio .mdl-radio__button:checked ~ .mdl-radio__inner-circle
.mdl-radio .mdl-radio__button:checked ~ .mdl-radio__label
Как изменить фон у радиокнопки на CSS
Меня недавно попросили рассказать, как поменять фон у радиокнопки через CSS. Задача это не тривиальная, поскольку обычными путями фон радиокнопки не изменить. Однако, есть обходные пути, о которых я в этой статье и поведаю.
Привожу HTML-код:
Отмечу важную вещь, что обязательно должен быть атрибут id у радиокнопки, плюс for на этот id у тега label. Без этого ничего работать не будет.
.r_button display: none;
>
.r_button + label background: url(«radio.png») no-repeat scroll 0 0;
cursor: pointer;
padding-left: 25px;
>
.r_button:checked + label background: url(«radio_active.png») no-repeat scroll 0 0;
>
Сразу скажу, что «+» означает, что стиль должен быть применён к label, следующему после .r_button.
Теперь поясню, как это работает. Мы скрываем вообще радиокнопку, то есть она не показывается. Зато у label мы ставим поле слева, плюс слева ставим фон неактивной радиокнопки. Однако, мы с Вами поставили for у label. Следовательно, по клику на метке, у нас радиокнопка включается. Следовательно, срабатывает селектор «.r_button:checked + label«, который меняет у нас фон label.
Как только идёт переключение на другую кнопку, сразу возвращаемся к неактивному фону.
Вот таким хитрым образом можно поменять фон у радиокнопки через CSS, а также сделать свой вид «активности«.
Отмечу, что данный способ работает во всех современных браузерах, за исключением IE8 и ниже. Для них придётся писать отдельный файл стилей, в которых оставить стандартные радиокнопки.
Создано 13.03.2013 04:34:00
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):