Как поменять цвет 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 апр в 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,542 3 3 золотых знака 16 16 серебряных знаков 53 53 бронзовых знака
Какие я уже только не делал и не видел, но такой вижу впервые!
28 июл 2018 в 17:55
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
doctor Brain
Исторически сложилось так, что радио-кнопки имеют предустановленный дизайн, который зависит от используемого браузера. И так же, традиционно, этот факт определяет проблемы, возникающие у начинающих разработчиков, при попытке стилизовать эти элементы.
Отключаем предустановленные стили
Кажется, для того чтобы изменить внешний вид списка с радио-кнопками, наиболее логичным вариантом будет использование традиционной html-конструкции:
Пункт 1 . Пункт n - атрибут name неизменен и определяет принадлежность элементов одному списку выбора,
- CSS класс .form-radio нужен для сброса предустановленных и определения собственных стилей,
- id и for идентичны и уникальны в каждой паре тегов input и label
Итак, переходим к магии CSS:
.form-radio < /* Сбрасываем предустановленные параметры */ appearance: none; -webkit-appearance: none; -moz-appearance: none; /* Определяем собственные параметры */ . >/* Устанавливаем параметры для выбранного элемента */ .form-radio:checked < . >/* Устанавливаем параметры при наведении */ .form-radio:hover
Теперь чуть подробнее. С помощью свойства appearance: none; мы сбрасываем предустановленные стили элементов input type=»radio» .
CSS свойство -moz-appearance используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.
Свойство -webkit-appearance используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта.
Затем устанавливаем собственные параметры для радио-кнопок в различных состояниях.
В чем подвох?
Дело в том, что свойство appearance: none; не работает для радио-кнопок в IE 10-11 и Edge, а в других браузерах приводит к различным эффектам, и чем старше версия браузера, тем более непредсказуемым будет результат.
Подробно можно посмотреть на сайтах caniuse и MDN.
Скрываем дефолтные радио-кнопки
Именно поэтому более разумным будет выбор другой схемы размещения HTML-элементов:
устанавливает связь между своим содержимым и элементом формы. Это означает, что нажатие на любой элемент, обернутый в label приведет к изменению состояния радио-кнопки. А это означает, что теперь мы можем скрыть штатные радио-кнопки и стилизовать заменяющие их элементы span >.
/* Определяем размещение по горизонтали элементов обернутых в label */ .form-radio-hidden < display: flex; flex-direction: row; height: 28px; position: relative; align-items: center; >/* Скрываем штатные радио-кнопки */ .form-radio-hidden input < position: absolute; opacity: 0; display: block; height: 0; width: 0; >/* Устанавливаем параметры элементов, заменяющих штатные радио-кнопки */ .form-radio-hidden .radio < appearance: none; -webkit-appearance: none; -moz-appearance: none; display: inline-block; position: relative; height: 20px; width: 20px; border-radius: 20px; margin-right: 5px; border: 1px solid #999999; background-color: #ffffff; box-shadow: 0 0 4px 0 rgba(0,0,0,0.1); cursor: pointer; outline: none; box-sizing: border-box; transition: .5s all; >/* Устанавливаем параметры элементов, заменяющих штатные радио-кнопки при наведении */ .form-radio-hidden:hover .radio < background-color: #f9f9f9; box-shadow: inset 1px 2px 3px 0 rgba(0,0,0,0.1); >/* Устанавливаем параметры элементов, заменяющих штатные выбранные радио-кнопки */ .form-radio-hidden input:checked + .radio < border-color: #555; background-color: #f9f9f9; box-shadow: inset 1px 2px 3px 0 rgba(0,0,0,0.1); cursor: default; >/* Добавляем декор */ .form-radio-hidden:hover .radio::before, .form-radio-hidden input:checked + .radio::before < content: ''; position: absolute; width: 8px; height: 8px; border-radius: 8px; background-color: #ddd; top: 50%; left: 50%; transform: translate(-50%,-50%); >.form-radio-hidden input:checked + .radio::before < background-color: #555; box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.2); >/* Устанавливаем параметры подписей радио-кнопок */ .form-radio-hidden input + .radio + .text < color: #777; cursor: pointer; font-size: 14px; line-height: 1.4; font-family: sans-serif; margin-right: 10px; align-self: center; >/* Устанавливаем параметры подписей выбранных радио-кнопок */ .form-radio-hidden input:checked + .radio + .text
Результат можно посмотреть на codepen:
Данный пример работает в IE 10-11 и Edge.
Спасибо за внимание.
Новые публикации
JavaScript: сохраняем страницу в pdf
Инструмент выбора цвета
Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зелёный / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).
Каждый цвет во время настройки представлен во всех 3-х стандартных форматах CSS, и, кроме того, на основе текущего выбранного цвета генерируется палитра для HSL, HSV и альфа-канала. Кнопкой «пипетка» можно переключаться между HSL или HSV форматами.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как изменить цвет radio css
Чтобы изменить цвет радио кнопки с помощью CSS, вы можете использовать следующий код:
«`css
input[type=radio] /* Укажите желаемый цвет для радио кнопки */
background-color: #ff0000;
/* Укажите желаемый цвет для пунктира окружности */
border-color: #ff0000;
/* Укажите желаемый цвет для центральной точки */
/* Некоторые браузеры не отображают эту точку */
color: #ff0000;
>
/* Если вы хотите изменить цвет при наведении на радио кнопку */
input[type=radio]:hover background-color: #00ff00;
border-color: #00ff00;
color: #00ff00;
>
/* Если вы хотите изменить цвет при выборе радио кнопки, когда она активна */
input[type=radio]:checked background-color: #0000ff;
border-color: #0000ff;
color: #0000ff;
>
«`
Вы можете изменить цвета (#ff0000, #00ff00, #0000ff) на любые другие значения, которые соответствуют вашему дизайну.
Также, не забудьте добавить этот CSS код в вашу таблицу стилей (файл. css) или внутри тега
в вашем HTML документе.
Важно отметить, что этот метод изменяет стандартный внешний вид радио кнопки и может не работать во всех браузерах одинаково.