Как стилизовать radio на css

doctor Brain

Исторически сложилось так, что радио-кнопки имеют предустановленный дизайн, который зависит от используемого браузера. И так же, традиционно, этот факт определяет проблемы, возникающие у начинающих разработчиков, при попытке стилизовать эти элементы.

Содержание

Отключаем предустановленные стили

Кажется, для того чтобы изменить внешний вид списка с радио-кнопками, наиболее логичным вариантом будет использование традиционной html-конструкции:

  1. атрибут name неизменен и определяет принадлежность элементов одному списку выбора,
  2. CSS класс .form-radio нужен для сброса предустановленных и определения собственных стилей,
  3. id и for идентичны и уникальны в каждой паре тегов input и label

Итак, переходим к магии CSS:

Теперь чуть подробнее. С помощью свойства 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> устанавливает связь между своим содержимым и элементом формы. Это означает, что нажатие на любой элемент, обернутый в label приведет к изменению состояния радио-кнопки. А это означает, что теперь мы можем скрыть штатные радио-кнопки и стилизовать заменяющие их элементы span >.

Результат можно посмотреть на codepen:

Данный пример работает в IE 10-11 и Edge.

Спасибо за внимание.

Новые публикации

Photo by CHUTTERSNAP on Unsplash

JavaScript: сохраняем страницу в pdf

HTML: Полезные примеры

Как стилизовать radio на css

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 6b8378951b5024aa • Your IP : 89.162.247.52 • Performance & security by Cloudflare

Создание доступных чекбоксов и радиокнопок на чистом CSS

Создание доступных чекбоксов и радиокнопок на чистом CSS

От автора: если вы читаете эту статью, то вы знаете, сколько боли вызывает кастомная стилизация чекбоксов и радиокнопок. Если оставить стили по умолчанию, то они будут по-разному смотреться в разных браузерах. Подобную проблему можно решить разными способами: с помощью вендорных префиксов, фоновых изображений, символов юникода и шрифтов-иконок. Но у большинства способов есть свои проблемы, или они неодинаково реализуются в браузерах. Кроме того, только несколько решений заботятся о доступности.

Ни один из вышеперечисленных методов не дает мне то, чего я хочу. Я нашел простой способ, который очень просто обслуживать, и который не идет на компромиссы. Приступим! Нам понадобится:

псевдоэлементы ::before и ::after

CSS псевдокласс :checked

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Представленная тройка хорошо поддерживается почти во всех браузерах (IE 10 и выше).

В этой статье я продемонстрирую способ на чекбоксах. С радиокнопками подход такой же, только немного отличаются стили.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *