Кастомные radio button. Как сделать такое?

Для создания кастомных radio button в HTML можно использовать стандартную разметку и CSS стилизацию. Вот пример шагов, которые необходимо выполнить:

1. **Разметка HTML**: Сначала создаем стандартные radio button с помощью тега <input> и <label>. Например:

<input type="radio" id="radio1" name="customRadio">
<label for="radio1">Option 1</label>

<input type="radio" id="radio2" name="customRadio">
<label for="radio2">Option 2</label>

В данном примере у нас есть два radio button с различными значениями и метками.

2. **Скрытие стандартных элементов**: Чтобы скрыть стандартные radio button, необходимо применить CSS свойство display: none; к <input> элементам:

input[type="radio"] {
    display: none;
}

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

input[type="radio"] + label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

input[type="radio"] + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #333;
    border-radius: 50%;
}

input[type="radio"]:checked + label:before {
    background-color: #333;
}

Этот CSS код добавляет стилизацию для круглых radio button. При выборе элемента, круг становится закрашенным.

4. **JavaScript (необязательно)**: Обычно не требуется использовать JavaScript для стилизации radio button, но в некоторых случаях он может быть полезен для добавления дополнительного поведения.

После выполнения этих шагов, у вас будет кастомный radio button, который будет выглядеть и вести себя как стандартный, но с вашим собственным дизайном.