Стилизация Radio Button

11.04.2019

178671

Несколько примеров изменения вида радио кнопок на чистом CSS. Единственное неудобство метода в том, что приходится указывать уникальные id.

Стандартные элементы

Понадобятся всего два изображения, которые можно объединить в спрайт. Состояния заблокированного элемента и при наведении можно сделать CSS фильтрами.

<div class="form_radio">
	<input id="radio-1" type="radio" name="radio" value="1" checked>
	<label for="radio-1">Radio button 1</label>
</div>

<div class="form_radio">
	<input id="radio-2" type="radio" name="radio" value="2">
	<label for="radio-2">Radio button 2</label>
</div>

<div class="form_radio">
	<input id="radio-3" type="radio" name="radio" value="3">
	<label for="radio-3">Radio button 3</label>
</div>

<div class="form_radio">
	<input id="radio-4" type="radio" name="radio" value="4" disabled>
	<label for="radio-4">Radio disabled</label>
</div>

HTML

.form_radio {
	margin-bottom: 10px;
}
.form_radio input[type=radio] {
	display: none;
}
.form_radio label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 0;
	line-height: 18px;
	user-select: none;
}
.form_radio label:before {
	content: "";
	display: inline-block;
	width: 17px;
	height: 18px;
	position: absolute;
	left: 0;
	bottom: 1px;
	background: url(/img/radio-1.png) 0 0 no-repeat;
}

/* Checked */
.form_radio input[type=radio]:checked + label:before {
	background: url(/img/radio-2.png) 0 0 no-repeat;
}

/* Hover */
.form_radio label:hover:before {
	filter: brightness(120%);
}

/* Disabled */
.form_radio input[type=radio]:disabled + label:before {
	filter: grayscale(100%);
}

CSS

Radio в виде кнопок

<div class="form_radio_btn">
	<input id="radio-1" type="radio" name="radio" value="1" checked>
	<label for="radio-1">Radio button 1</label>
</div>

<div class="form_radio_btn">
	<input id="radio-2" type="radio" name="radio" value="2">
	<label for="radio-2">Radio button 2</label>
</div>

<div class="form_radio_btn">
	<input id="radio-3" type="radio" name="radio" value="3">
	<label for="radio-3">Radio button 3</label>
</div>

<div class="form_radio_btn">
	<input id="radio-4" type="radio" name="radio" value="4" disabled>
	<label for="radio-4">Disabled</label>
</div>

HTML

.form_radio_btn {
	display: inline-block;
	margin-right: 10px;
}
.form_radio_btn input[type=radio] {
	display: none;
}
.form_radio_btn label {
	display: inline-block;
	cursor: pointer;
	padding: 0px 15px;
	line-height: 34px;
	border: 1px solid #999;
	border-radius: 6px;
	user-select: none;
}

/* Checked */
.form_radio_btn input[type=radio]:checked + label {
	background: #ffe0a6;
}

/* Hover */
.form_radio_btn label:hover {
	color: #666;
}

/* Disabled */
.form_radio_btn input[type=radio]:disabled + label {
	background: #efefef;
	color: #666;
}

CSS

Группа кнопок

<div class="form_radio_group">
	<div class="form_radio_group-item">
		<input id="radio-1" type="radio" name="radio" value="1" checked>
		<label for="radio-1">Radio button 1</label>
	</div>
	<div class="form_radio_group-item">
		<input id="radio-2" type="radio" name="radio" value="2">
		<label for="radio-2">Radio button 2</label>
	</div>
	<div class="form_radio_group-item">
		<input id="radio-3" type="radio" name="radio" value="3">
		<label for="radio-3">Radio button 3</label>
	</div>
	<div class="form_radio_group-item">
		<input id="radio-4" type="radio" name="radio" value="4" disabled>
		<label for="radio-4">Disabled</label>
	</div>
</div>

HTML

.form_radio_group {
	display: inline-block;
	overflow: hidden;
}
.form_radio_group-item {
	display: inline-block;
	float: left;    
}
.form_radio_group input[type=radio] {
	display: none;
}
.form_radio_group label {
	display: inline-block;
	cursor: pointer;
	padding: 0px 15px;
	line-height: 34px;
	border: 1px solid #999;
	border-right: none;
	user-select: none;
}

.form_radio_group .form_radio_group-item:first-child label {
	border-radius: 6px 0 0 6px;
}
.form_radio_group .form_radio_group-item:last-child label {
	border-radius: 0 6px 6px 0;
	border-right: 1px solid #999;
}

/* Checked */
.form_radio_group input[type=radio]:checked + label {
	background: #ffe0a6;
}

/* Hover */
.form_radio_group label:hover {
	color: #666;
}

/* Disabled */
.form_radio_group input[type=radio]:disabled + label {
	background: #efefef;
	color: #666;
}

CSS

Переключатель

<div class="form_toggle">
	<div class="form_toggle-item item-1">
		<input id="fid-1" type="radio" name="radio" value="off" checked>
		<label for="fid-1">OFF</label>
	</div>
	<div class="form_toggle-item item-2">
		<input id="fid-2" type="radio" name="radio" value="on">
		<label for="fid-2">ON</label>
	</div>
</div>

HTML

.form_toggle {
	display: inline-block;
	overflow: hidden;
}
.form_toggle-item {
	float: left;
	display: inline-block;
}
.form_toggle-item input[type=radio] {
	display: none;
}
.form_toggle-item label {
	display: inline-block;
	padding: 0px 15px;   
	line-height: 34px;    
	border: 1px solid #999;
	border-right: none;
	cursor: pointer;
	user-select: none;   
}

.form_toggle .item-1 label {
	border-radius: 6px 0 0 6px;
}
.form_toggle .item-2 label {
	border-radius: 0 6px 6px 0;
	border-right: 1px solid #999;
}

/* Checked */
.form_toggle .item-1 input[type=radio]:checked + label {
	background: #ffc5c5;
}
.form_toggle .item-2 input[type=radio]:checked + label {
	background: #bbffbb;
}

CSS

11.04.2019, обновлено 26.02.2020

178671

#CSS #HTML #Формы

38 6

Предыдущая запись CSS стили выделенного текста

Следующая запись Как сделать полосатую таблицу на HTML, CSS, JS, PHP

Комментарии 2

Василий Крохин

24 декабря 2022 в 19:26

Побскажите пожалуйста, как быть если вот такя структура почемуто не становится активный после нажатия
<div class="form_radio_btn">
<label for="radio-1">Radio button 1
<input id="radio-1" type="radio" name="radio" value="1">
</label>
</div>

Ответить