Чекбоксы в виде кнопок

В продолжении статьи о стилизации чекбоксов, несколько примеров как стилизовать чекбоксы в кнопки и группы кнопок.

HTML-разметка:

<label class="checkbox-btn">
	<input type="checkbox" checked>
	<span>Checkbox #1</span>
</label>
	
<label class="checkbox-btn">
	<input type="checkbox">
	<span>Checkbox #2</span>
</label>
	
<label class="checkbox-btn">
	<input type="checkbox">
	<span>Checkbox #3</span>
</label>
	
<label class="checkbox-btn">
	<input type="checkbox" disabled>
	<span>Checkbox #4</span>
</label>
	
<label class="checkbox-btn">
	<input type="checkbox" checked disabled>
	<span>Checkbox #5</span>
</label>
HTML

Фокус по клавише Tab:

$(window).keyup(function(e){
	var target = $('.checkbox-btn input:focus');
	if (e.keyCode == 9 && $(target).length){
		$(target).parent().addClass('focused');
	}
});
 
$('.checkbox-btn input').focusout(function(){
	$(this).parent().removeClass('focused');
});
JS

CSS-стили:

.checkbox-btn {
	display: inline-block;
	margin: 0 5px 0 0;
	user-select: none;
	position: relative;
}
.checkbox-btn input[type=checkbox] {
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0;
}
.checkbox-btn span {
	display: inline-block;
	cursor: pointer;
	padding: 0px 10px;
	line-height: 30px;
	border: 1px solid #999;
	border-radius: 4px;
	transition: background 0.2s ease;
}

/* Checked */
.checkbox-btn input[type=checkbox]:checked + span {
	background: #ffe0a6;
}

/* Focus */
.focused span {
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Hover */
.checkbox-btn:hover {
	color: #666;
}

/* Active */
.checkbox-btn input[type=checkbox]:active:not(:disabled) + span {
	background: #d2c5ac;
	color: #000;
}

/* Disabled */
.checkbox-btn input[type=checkbox]:disabled + span {
	background: #efefef;
	color: #666;
	cursor: default;
}
.checkbox-btn input[type=checkbox]:checked:disabled + span {
	background: #f7efdc;
}
CSS

Результат:

HTML-разметка:

<div class="checkbox-btn-group">
	<label>
		<input type="checkbox" checked>
		<span>Checkbox #1</span>
	</label>
	<label>
		<input type="checkbox">
		<span>Checkbox #2</span>
	</label>
	<label>
		<input type="checkbox">
		<span>Checkbox #3</span>
	</label>
	<label>
		<input type="checkbox" disabled>
		<span>Checkbox #4</span>
	</label>
	<label>
		<input type="checkbox" checked disabled>
		<span>Checkbox #5</span>
	</label>
</div>
HTML

Фокус по клавише Tab:

$(window).keyup(function(e){
	var target = $('.checkbox-btn-group input:focus');
	if (e.keyCode == 9 && $(target).length){
		$(target).parent().addClass('focused');
	}
});
 
$('.checkbox-btn-group input').focusout(function(){
	$(this).parent().removeClass('focused');
});
JS

CSS-стили:

.checkbox-btn-group {
	display: inline-block;
}
.checkbox-btn-group:after { 
  content: ""; 
  clear: both; 
  display: block;
}
.checkbox-btn-group label {
	display: inline-block;
	float: left;  
	margin: 0;
	user-select: none;
	position: relative;
}
.checkbox-btn-group input[type=checkbox] {
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0;
}
.checkbox-btn-group span {
	display: inline-block;
	cursor: pointer;
	padding: 0px 10px;
	line-height: 30px;
	border: 1px solid #999;
	border-right: none;
	transition: background 0.2s ease;
}
.checkbox-btn-group label:first-child span {
	border-radius: 4px 0 0 4px;
}
.checkbox-btn-group label:last-child span {
	border-radius: 0 4px 4px 0;
	border-right: 1px solid #999;
}

/* Checked */
.checkbox-btn-group input[type=checkbox]:checked + span {
	background: #ffe0a6;
}

/* Focus */
.checkbox-btn-group .focused span {
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Hover */
.checkbox-btn-group label:hover {
	color: #666;
}

/* Active */
.checkbox-btn-group input[type=checkbox]:active:not(:disabled) + span {
	background: #d2c5ac;
	color: #000;
}

/* Disabled */
.checkbox-btn-group input[type=checkbox]:disabled + span {
	background: #efefef;
	color: #666;
	cursor: default;
}
.checkbox-btn-group input[type=checkbox]:checked:disabled + span {
	background: #f7efdc;
}
CSS

Результат:

22.05.2020, обновлено 14.10.2020
9999

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

Jumaev Shuxratovich Jumaev Shuxratovich
10 июля 2021 в 14:57
0
У меня данный пример не работает

, чтобы добавить комментарий.

Другие публикации

Работа с checkbox в JQuery
Сборник приемов JQuery для работы с чекбоксом.
195162
+12
Отметить или снять все чекбоксы в таблице
Мини JQuery плагин позволяет отметить или снять одним кликом чекбоксы в таблицах и отметить чекбокс по клику на сроку...
8292
+1
Checkbox или radiobutton в меню dropdowns
Проблема в том что если вставить чекбокс, радиокнопку в меню dropdowns Bootstrap и кликнув по ним, меню сразу...
8698
+1
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
28368
+31
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
9480
+5
Выделение ячеек таблицы по клику
В продолжении статей о рамках у ячеек таблицы, сделаем их появление по клику с помощью JQuery.
10313
+3