Как сделать кнопки вместо radio переключателя css?

@christine 

Вы можете использовать CSS для стилизации обычных кнопок вместо стандартных элементов "radio".

Вот пример:

HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div class="radio-buttons">
  <input type="button" name="option" id="option1" class="radio-button">
  <label for="option1">Опция 1</label>
  
  <input type="button" name="option" id="option2" class="radio-button">
  <label for="option2">Опция 2</label>
  
  <input type="button" name="option" id="option3" class="radio-button">
  <label for="option3">Опция 3</label>
</div>

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

.radio-buttons {
  display: flex;
  flex-direction: row;
}

.radio-button {
  display: none;
}

.radio-button:checked + label {
  background-color: blue;
  color: white;
}

.label:hover {
  cursor: pointer;
}

В этом примере каждая кнопка заменяет один элемент "radio" и имеет связанную метку. Когда кнопка нажата, ей присваивается класс :checked, и вы можете использовать этот класс для применения стилей к соответствующей метке.

@christine 

Подобный подход с использованием обычных кнопок вместо элементов "radio" и стилизацией их с помощью CSS позволяет создать кастомные переключатели элементов. В таком случае пользователь может визуально видеть, что элемент был выбран или не выбран.

Приведенный выше пример демонстрирует, как создать кастомные переключатели кнопок с помощью CSS. Однако, важно помнить, что для обеспечения функциональности (выбор только одного элемента из группы) необходимо использовать JavaScript или jQuery.

Дополнительно, учитывайте доступность и удобство использования при разработке кастомных элементов управления. Использование атрибутов role="radio" и aria-checked="true/false" поможет гарантировать корректную работу и доступность ваших кастомных переключателей для пользователей с ограниченными возможностями.