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

22.05.2020

20475

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

Кнопки

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');
});

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');
});

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