Как изменить radio CSS

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

Для стилизации radio-кнопок можно использовать CSS-свойство appearance, которое определяет внешний вид элемента формы. Например, чтобы убрать стандартный внешний вид radio-кнопки, можно использовать следующий CSS-код:

input[type="radio"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

Здесь используется селектор для input-элемента с типом «radio», чтобы настроить стиль для этого элемента. Затем мы используем свойство appearance для установки стиля элемента. Значение none предотвращает отображение стандартного оформления browser-а.

Однако, после этого radio-кнопки будут скрыты, чтобы добавить стилизации, можно использовать псевдоклассы CSS, такие как :before и :after, для создания новых элементов и реализации нового дизайна. Ниже приведен пример CSS для создания новой radio-кнопки:

.radio-wrapper {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 10px;
}
.radio-wrapper input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.radio-wrapper label {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #aaa;
  border-radius: 50%;
}
.radio-wrapper label:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  background-color: #aaa;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}
.radio-wrapper label:hover:before {
  opacity: 0.5;
}
.radio-wrapper input[type="radio"]:checked + label:after {
  opacity: 1;
}

Здесь мы используем селектор .radio-wrapper для дизайна всей radio-кнопки и input[type="radio"] для установки свойств radio-кнопки.

Мы используем свойство position для определения положения элементов, border — для определения стиля границы, и border-radius — для задания радиуса кривизны краев для кругов.

Мы также используем псевдоэлементы :after и :hover, а также псевдокласс :checked, чтобы добавить стилизацию для разных состояний элемента. Кроме того, мы также добавляем анимацию перехода, чтобы сделать дизайн более плавным.

Пример HTML-кода с новой стилизованной radio-кнопкой:

<div class="radio-wrapper">
  <input type="radio" id="radio1" name="radio-group" value="value1">
  <label for="radio1"></label>
</div>

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