Использование изображений вместо радио кнопок: HTML/CSS

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

Чтобы превратить изображения в интерактивные радиокнопки, выполните следующие шаги: скройте элементы <input type="radio">, затем отобразите их при помощи элементов <label>, применив к ним background-image. Чтобы связать элементы label с соответствующими радиокнопками, используйте атрибут for. Используйте CSS-псевдокласс :checked, чтобы подсветить активное изображение, и тем самым визуализировать выбор пользователя.

<style>
  .image-radio { display: none; }
  .radio-label { 
    cursor: pointer;
    background-size: cover; 
    width: 100px; height: 100px; /* Задайте желаемые размеры */
  }
  .image-radio:checked + .radio-label { border: 2px solid #f00; } /* Выделяем выбранное */
</style>

<form>
  <input type="radio" id="img1" class="image-radio" name="choice" />
  <label for="img1" class="radio-label" style="background-image: url('img1.jpg');"></label>
  
  <input type="radio" id="img2" class="image-radio" name="choice" />
  <label for="img2" class="radio-label" style="background-image: url('img2.jpg');"></label>
</form>

Присвойте .radio-label соответствующий размер в пикселях. Теперь выбор изображения будет изменять значение радиокнопки, как по волшебству.

Улучшение взаимодействия и доступности

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

.radio-label { transition: transform 0.2s ease; }
.image-radio:checked + .radio-label { transform: scale(1.1); /* При выборе элемент увеличивается */ }

Не забудьте об экранном чтении, добавив aria-label с описанием каждого изображения:

<input type="radio" id="img3" class="image-radio" name="choice" />
<label for="img3" class="radio-label" aria-label="Майка с изображением собаки" style="background-image: url('img3.jpg');"></label>

Таким образом, скрытые радиокнопки будут правильно интерпретироваться скринридерами.

Совместимость с различными браузерами

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

.image-radio {
  -webkit-appearance: none; /* Для Chrome */
  -moz-appearance: none; /* Для Firefox */
  appearance: none;
}

Для обеспечения дополнительной совместимости браузеров используйте инструменты, такие как Modernizr.

Стилизация состояний фокуса и выбора

Уделите особое внимание стилизации взаимодействия с элементами, это может значительно улучшить пользовательский опыт. Оформите CSS для состояний :focus и :checked следующим образом:

.radio-label:focus-within { box-shadow: 0 0 0 2px #5b9dd9; }
.image-radio:focus + .radio-label { outline: none; }

Использование относительных единиц измерения, таких как em или vw, поможет элементам адаптироваться к различным типам экранов.

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

Воздействуйте на ассоциированный опыт ваших пользователей: представьте себе радиокнопки в виде рядов рубашек в вашем гардеробе:

Обычные радиокнопки: [👔] [👔] [👔]

Теперь преобразуйте их в изображения, будто это выбор футболок с любимыми принтами:

Изображения вместо радиокнопок: [🐶👕] [🍕👕] [🚀👕]

Нажатие на изображение футболки с принтом это и есть ваш выбор:

Выбрано: [🍕👕]

Вы как бы пересматриваете выбор футболок в своем гардеробе, только вместо этого вам предстоит работать с элементами веб-формы! 🌟

Гармоничная интеграция и расширенная настройка

Все радиокнопки, работающие в одной группе, должны иметь общий name. При выборе, к .image-radio:checked применяется стиль, и вы можете добавить специальные иконки или галочки с помощью псевдоэлемента ::after:

.image-radio:checked + .radio-label::after {
  content: url('checkmark-icon.png');
  position: absolute;
  top: 10px; right: 10px;
}

Если хотите, чтобы радиокнопка была изначально выбрана, добавьте к ней атрибут checked:

<input type="radio" id="img1" class="image-radio" name="choice" checked />

Применив user-select: none, вы сможете предотвратить случайное выделение текста при клике по изображениям.

Устранение проблем как профессионал

Если возникнет проблема с подсветкой текста при выборе, обратите внимание на свойство user-select со значением none:

.radio-label { user-select: none; }

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

.radio-label {
  background-size: contain;
  background-position: center;
}

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

1. Использование изображений в качестве радиокнопок – Stack Overflow — об использовании изображений в роли радиокнопок.
2. Selectors Level 3 — справочник по CSS-селекторам для состояния :checked.
3. Learn Forms | web.dev — продвинутые техники работы с веб-формами.
4. The "Checkbox Hack" (and things you can do with it) | CSS-Tricks — стилизация чекбоксов и другие возможности.