"Как изменить размер радиокнопки с помощью CSS: руководство"

Быстрый ответ

Для увеличения размера радиокнопки в два раза воспользуйтесь следующим кодом на CSS:

input[type='radio'] {
  transform: scale(2); /* размер кнопки увеличивается, но макет сохраняет себя */
}

Макет страницы при это останется неизменным, поскольку изменяется только визуал элемента, а не его фактические размеры.

Настройка радиокнопки

Прямое изменение свойств width и height может привести к нежелательным последствиям из-за большого разнообразия браузерных стандартов. Для установки нужных размеров, начните с отключения стандартного оформления:

input[type='radio'] {
  -webkit-appearance: none; /* В Safari и Chrome отключены стандартные стили */
  -moz-appearance: none; /* Firefox поддержит это решение */
  appearance: none; /* Для других браузеров */
  width: 24px; /* Устанавливаем нужную ширину */
  height: 24px; /* Устанавливаем нужную высоту */
  border-radius: 50%; /* Делаем элемент круглым */
  background-color: #eee; /* Выберите цвет заливки по своему усмотрению */
}

Точное масштабирование и выравнивание

Для предотвращения размытия при увеличении используйте уместное масштабирование и вертикальное выравнивание:

input[type='radio'] {
  vertical-align: middle;
  transform: scale(1.2); /* Незначительное увеличение для визуального выделения */
}

Для создания плавного эффекта преобразования примените свойство transition:

input[type='radio'] {
  transition: transform 0.2s ease-in-out; /* Обеспечивает плавный переход */
}

Соответствие размера и доступности

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

Визуализация

Вот как можно визуализировать изменение размера радиокнопки при помощи CSS:

Исходный размер:  [🔘]
После увеличения: [🔵]

input[type='radio'] { 
  transform: scale(1.5); /* Увеличение на 50% */
}

Визуальный эффект от данного преобразования:

Исходное:   [🔘][🔘][🔘]
Измененное: [🔵][🔵][🔵]

CSS позволяет добиться такого же визуального изменения.

Стилизация, выходящая за рамки обычного

Игра формами

Радиокнопка может быть не только круглой. Примените свойство border-radius, чтобы создать элементы с нестандартными формами.

Подробнее об этом расскажет наш спикер на видео

JavaScript: ваш запасной план

Когда CSS оказывается не в состоянии справиться, на помощь приходит JavaScript, позволяющий создать более тонкие интерактивные действия:

document.querySelector('input[type='radio']').addEventListener('mouseover', function() {
  this.style.transform = 'scale(1.3)'; /* Эффект увеличения при наведении курсора */
});

Метки тоже откликаются на действия пользователя

Не забывайте о стилизации меток, которые также могут изменить размер при взаимодействии:

document.addEventListener('click', function(e) {
  if (e.target.tagName === 'LABEL') {
    document.getElementById(e.target.htmlFor).style.transform = 'scale(1.3)'; /* Метки также принимают участие в веселье */
  }
});

Практические примеры и предварительный просмотр

Используйте онлайн-платформы

Plunker и аналоги позволяют поделиться интерактивными примерами, предоставляя возможность в реальном времени демонстрировать ваше творчество всему миру.

Демонстрируйте, не только рассказывайте

Анимированные изображения (гифки) способны наглядно демонстрировать эффект "до и после", связанный с изменениями в ваших стилях.

Полезные материалы

1. Checkbox Hack (и что можно с этим сделать) | CSS-Tricks
2. <input type="radio"> – MDN
3. Как создать пользовательский чекбокс и радиокнопки | W3Schools
4. html – Использование изображений вместо радиокнопок | Stack Overflow
5. Лучший доступный дизайн форм – A List Apart
6. Руководство | DigitalOcean