Карточки выбора: радиокнопки с полноценными подписями
Варианты интерфейса можно представить карточками, сохранив внутри обычные радиокнопки. Так визуальное оформление не требует заново программировать выбор и клавиатурное управление.
Назначение
Варианты интерфейса можно представить карточками, сохранив внутри обычные радиокнопки. Так визуальное оформление не требует заново программировать выбор и клавиатурное управление.
Как это работает
Одинаковый name объединяет input в одну группу. Label охватывает контрол и текст, увеличивая область нажатия. Выбранное состояние оформляется через checked, а фокус — отдельно, чтобы их нельзя было перепутать.
Пример
<style>.choices label{display:flex;align-items:center;gap:.7rem;padding:1rem;border:1px solid #809b8b;margin-block:.6rem}.choices input:checked+span{font-weight:700}.choices label:focus-within{outline:3px solid #176b50;outline-offset:2px}</style>
<fieldset class="choices"><legend>Режим чтения</legend>
<label><input type="radio" name="reading-mode" value="compact" checked><span>Компактный — короткие пояснения</span></label>
<label><input type="radio" name="reading-mode" value="detailed"><span>Подробный — дополнительные примеры</span></label></fieldset>Что должно получиться
Нажатие на текст выбирает соответствующий вариант. Клавиши стрелок позволяют менять выбор внутри нативной группы, а внешний контур помогает увидеть текущую область взаимодействия. Пример только выбирает значение, не меняя содержимое статьи.
Граница применения и частая ошибка
Не скрывайте input через display:none: он исчезнет из обычной клавиатурной навигации. Цвет карточки не должен быть единственным признаком выбора. Общая подпись вопроса через legend остаётся нужна даже при подробных названиях вариантов.
Самостоятельная проверка
Выберите каждый вариант мышью, затем повторите клавиатурой. Отключите CSS и убедитесь, что форма по-прежнему понятна. Проверьте длинное название и увеличение масштаба без обрезания текста.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.