Для создания кастомных radio button в HTML можно использовать несколько подходов. Один из самых популярных способов - это скрыть стандартные radio button с помощью CSS и стилизовать их с помощью элементов CSS, например, используя псевдоэлементы.
Вот пример кода:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Radio Buttons</title>
<style>
/* Скрыть стандартные radio button */
input[type="radio"] {
display: none;
}
/* Стилизация кастомных radio button */
.custom-radio {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #333;
border-radius: 50%;
}
/* Стилизация выбранного кастомного radio button */
input[type="radio"]:checked + .custom-radio {
background-color: #333;
}
</style>
</head>
<body>
<label>
<input type="radio" name="radio" value="option1">
<span class="custom-radio"></span>
Option 1
</label>
<label>
<input type="radio" name="radio" value="option2">
<span class="custom-radio"></span>
Option 2
</label>
<label>
<input type="radio" name="radio" value="option3">
<span class="custom-radio"></span>
Option 3
</label>
</body>
</html>
В данном примере при выборе radio button его стиль изменяется на фоновый цвет #333. Вы можете изменить стили и добавить анимации, чтобы сделать кастомные radio button более привлекательными и интерактивными.
Также существует множество библиотек и фреймворков, которые предоставляют готовые компоненты для кастомизации radio button, например, Bootstrap, Materialize и другие.