Вот несколько способов стилизации переключателей с помощью CSS:

Метод 1: использование элемента метки
Вы можете скрыть переключатель по умолчанию и создать собственный переключатель с помощью элемента . Вот пример:

HTML:

<input type="radio" id="radioButton" name="myRadioButton">
<label for="radioButton">Custom Radio Button</label>

CSS:

input[type="radio"] {
  display: none;
}
label {
  display: inline-block;
  padding: 5px 10px;
  background-color: #e9e9e9;
  border-radius: 3px;
  cursor: pointer;
}
input[type="radio"]:checked + label {
  background-color: #a1d8ff;
}

Метод 2. Использование псевдоэлементов CSS.
Вы также можете использовать псевдоэлементы CSS (::beforeи ::after) для создания пользовательских переключателей.. Вот пример:

HTML:

<input type="radio" id="radioButton" name="myRadioButton">
<label for="radioButton">Custom Radio Button</label>

CSS:

«»;
позиция: абсолютная;
слева: 0;
сверху: 0;
ширина: 20 пикселей;
высота: 20 пикселей;
граница: 2 пикселя, сплошная #e9e9e9 ;
border-radius: 50%;
}
input[type=”radio”]:checked + label::before {
background-color: #a1d8ff;

Метод 3: использование библиотек CSS
Существует несколько библиотек и фреймворков CSS, таких как Bootstrap и Materialize CSS, которые предоставляют предварительно оформленные переключатели. Вы можете включить эти библиотеки в свой проект и легко использовать их классы для стилизации переключателей.

Метод 4: использование значков SVG
Вы также можете использовать значки SVG в качестве переключателей и стилизовать их с помощью CSS. Такой подход обеспечивает большую гибкость с точки зрения проектирования. Вот пример:

HTML:

<input type="radio" id="radioButton" name="myRadioButton">
<label for="radioButton"><svg>...</svg></label>

CSS:

input[type="radio"] {
  display: none;
}
label {
  display: inline-block;
  cursor: pointer;
}
svg {
  /* SVG styling properties */
}
input[type="radio"]:checked + label svg {
  /* Styling for checked state */
}