Создание кастомных радиокнопок на CSS

Стандартные радиокнопки часто выглядят несовременно и плохо сочетаются с дизайном сайта. Используя CSS, мы можем создать красивые кастомные радиокнопки с анимацией переключения. В отличие от чекбоксов, радиокнопки позволяют выбрать только один вариант из группы.

HTML структура

Создадим группу из трёх радиокнопок, обёрнутых в label:

<div class="radio-group">
	<label class="custom-radio">
		<input type="radio" name="option">
		<span class="radio-icon"></span>
		<span class="radio-text">Вариант 1</span>
	</label>
	<label class="custom-radio">
		<input type="radio" name="option">
		<span class="radio-icon"></span>
		<span class="radio-text">Вариант 2</span>
	</label>
	<label class="custom-radio">
		<input type="radio" name="option">
		<span class="radio-icon"></span>
		<span class="radio-text">Вариант 3</span>
	</label>
</div>

Базовые стили

Скроем стандартные радиокнопки и создадим кастомные круглые индикаторы:

.radio-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.custom-radio {
	display: flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
}

.custom-radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.radio-icon {
	position: relative;
	height: 20px;
	width: 20px;
	border: 2px solid #ccc;
	border-radius: 50%;
	margin-right: 10px;
	transition: all 0.3s;
}

.radio-text {
	font-size: 16px;
}

Стили для выбранного состояния

Добавим индикатор выбранного состояния с помощью псевдоэлемента :after:

.custom-radio input:checked ~ .radio-icon {
	border-color: #4CAF50;
}

.radio-icon:after {
	content: "";
	position: absolute;
	display: none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #4CAF50;
}

.custom-radio input:checked ~ .radio-icon:after {
	display: block;
}

Анимация и hover-эффекты

Добавим плавные переходы и анимацию при наведении:

.radio-icon {
	transition: border-color 0.2s ease-in-out;
}

.custom-radio:hover .radio-icon {
	border-color: #888;
}

.radio-icon:after {
	transition: transform 0.2s ease-in-out;
}

.custom-radio input:checked ~ .radio-icon:after {
	animation: radioSelect 0.3s ease-out;
}

@keyframes radioSelect {
	0% { transform: translate(-50%, -50%) scale(0); }
	80% { transform: translate(-50%, -50%) scale(1.2); }
	100% { transform: translate(-50%, -50%) scale(1); }
}

Итоговый код

Полный код кастомных радиокнопок с анимацией:

<div class="radio-group">
	<label class="custom-radio">
		<input type="radio" name="option">
		<span class="radio-icon"></span>
		<span class="radio-text">Вариант 1</span>
	</label>
	<label class="custom-radio">
		<input type="radio" name="option">
		<span class="radio-icon"></span>
		<span class="radio-text">Вариант 2</span>
	</label>
	<label class="custom-radio">
		<input type="radio" name="option">
		<span class="radio-icon"></span>
		<span class="radio-text">Вариант 3</span>
	</label>
</div>

.radio-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.custom-radio {
	display: flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
}

.custom-radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.radio-icon {
	position: relative;
	height: 20px;
	width: 20px;
	border: 2px solid #ccc;
	border-radius: 50%;
	margin-right: 10px;
	transition: border-color 0.2s ease-in-out;
}

.radio-text {
	font-size: 16px;
}

.custom-radio:hover .radio-icon {
	border-color: #888;
}

.custom-radio input:checked ~ .radio-icon {
	border-color: #4CAF50;
}

.radio-icon:after {
	content: "";
	position: absolute;
	display: none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #4CAF50;
	transition: transform 0.2s ease-in-out;
}

.custom-radio input:checked ~ .radio-icon:after {
	display: block;
	animation: radioSelect 0.3s ease-out;
}

@keyframes radioSelect {
	0% { transform: translate(-50%, -50%) scale(0); }
	80% { transform: translate(-50%, -50%) scale(1.2); }
	100% { transform: translate(-50%, -50%) scale(1); }
}