Хак DLE стилизация чекбоксов на CSS

Рубрика: Хаки для DLE » Хак DLE 13.1, 13.0, 12.1, 12.0, 11.3, 11.2, 11.1, 11.0, 10.6, 10.5, 10.4, 10.3, 10.2, 10.1, 10.0, 9.8
Хак DLE стилизация чекбоксов на CSS
Представляем на www.dle9.com хак DLE стилизация чекбоксов на CSS - этот хак позволит красиво оформить удобные чекбоксы разных размеров, менять цвета и легко встроить в верстку вашего шаблона. Разработка чекбокса на CSS представлена Олег Александровичем a.k.a. Sander, это прекрасная заготовка стилей HTML5 и CSS3, просто добавляется в верстку для использования в DLE шаблонах.

Хак DLE стилизация чекбоксов на CSS

Весь функционал стилизация чекбоксов реализовано на чистом CSS с применением псевдоэлементов before и after. В интернете вы можете найти много примеров реализации таких чекбокса, но все они с использования id и for, что не очень понравилось автору. Не критично, когда вы используете чекбоксы в количестве 1-2., но если их планируется 5 и более, то уже как-то не охота каждому придумывать и прописывать уникальные имена.

В этом случаи можно использовать простой вариант без применения вышеуказанных аттрибутов.
Этот вариант поддерживает переключение между элементами кнопкой tab и так же переключение значения пробелом.

Для примера сделал 3 варианта кнопки.
Стилизация чекбоксов на CSS

У всех одинаковая html структура:

<label class="checkbox">
	<input type="checkbox" />
	<span>Заголовок чекбокса</span>
</label>
<label class="checkbox">
	<input type="checkbox" checked />
	<span>Заголовок отмеченного чекбокса</span>
</label>
<label class="checkbox">
	<input type="checkbox" disabled />
	<span>Заголовок отключенного чекбокса</span>
</label>


Отличаются только стили.

CSS: Большая кнопка

.checkbox{
	display: inline-block;
	padding: 5px 5px 5px 46px;
	margin: 0;
	position: relative;
	cursor: pointer;
}
.checkbox input{
	position: absolute;
	opacity: 0;
	cursor: inherit;
}
.checkbox span{
	display: inline-block;
	font: normal 12px/18px Arial;
	padding: 1px 0;
}
.checkbox span:before,
.checkbox span:after{
	content: '';
	position: absolute;
	top: 50%;
	transition: .3s;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.checkbox span:before{
	left: 0;
	height: 14px;
	margin-top: -7px;
	width: 36px;
	border-radius: 7px;
	background: #aaa;
	box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
}
.checkbox span:after{
	left: 0;
	margin-top: -10px;
	height: 20px;
	width: 20px;
	background: #fafafa;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.checkbox input:checked + span:before{
	background-color: #93c9f3;
}
.checkbox input:checked + span:after{
	background-color: #2793e6;
	left: 16px;
}

.checkbox input:focus + span:before{
	box-shadow: 0 0 0 3px rgba(50,150,255,.2);
}

.checkbox input:disabled + span{
	opacity: .35;
}
.checkbox input:disabled + span:before{
	background: #ccc;
}


CSS: Маленькая кнопка внутри

.checkbox{
	display: inline-block;
	padding: 5px 5px 5px 38px;
	margin: 0;
	position: relative;
	cursor: pointer;
}
.checkbox input{
	position: absolute;
	opacity: 0;
	cursor: inherit;
}
.checkbox span{
	display: inline-block;
	font: normal 12px/16px Arial;
	padding: 0;
}
.checkbox span:before,
.checkbox span:after{
	content: '';
	position: absolute;
	top: 50%;
	transition: .3s;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.checkbox span:before{
	left: 0;
	height: 16px;
	margin-top: -8px;
	width: 28px;
	border-radius: 8px;
	background: #e75b5b;
}
.checkbox span:after{
	left: 2px;
	height: 12px;
	width: 12px;
	margin-top: -6px;
	background: #fff;
	border-radius: 50%;
}

.checkbox input:checked + span:before{
	background-color: #55b183;
}
.checkbox input:checked + span:after{
	left: 14px;
}

.checkbox input:focus + span:before{
	box-shadow: 0 0 0 3px rgba(50,150,255,.2);
}

.checkbox input:disabled + span{
	opacity: .35;
}
.checkbox input:disabled + span:before{
	background: #999;
}


CSS: Большая кнопка внутри

.checkbox{
	display: inline-block;
	padding: 5px 5px 5px 56px;
	margin: 0;
	position: relative;
	cursor: pointer;
}
.checkbox input{
	position: absolute;
	opacity: 0;
	cursor: inherit;
}
.checkbox span{
	display: inline-block;
	font: normal 12px/16px Arial;
	padding: 4px 0;
}
.checkbox span:before,
.checkbox span:after{
	content: '';
	position: absolute;
	top: 50%;
	transition: .3s;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.checkbox span:before{
	left: 0;
	height: 24px;
	margin-top: -12px;
	width: 46px;
	border-radius: 12px;
	background: #ddd;
	box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}
.checkbox span:after{
	left: 1px;
	height: 22px;
	width: 22px;
	margin-top: -11px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.checkbox input:checked + span:before{
	background-color: #4caf50;
}
.checkbox input:checked + span:after{
	left: 23px;
}

.checkbox input:focus + span:before{
	box-shadow: 0 0 0 3px rgba(50,150,255,.2);
}

.checkbox input:disabled + span{
	opacity: .35;
}
.checkbox input:disabled + span:before{
	background: #ddd;
}

Демо:

С уважением,
Олег Александрович a.k.a. Sander

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

Представляем на www.dle9.com хак DLE стилизация чекбоксов на CSS - этот хак позволит красиво оформить удобные чекбоксы разных размеров, менять цвета всё лучшее у нас форумы, хаки, модули, шаблоны.
  • 80
Рубрика: DLE хаки » Хак для DLE
Ранее » Делаем title, description и keywords в основной вкладке« Далее Хак DLE Простые заголовки (метатеги)
Нажмите на ссылку, чтобыОставить комментарий
  • № :1
  • 19 апреля 2018 13:35
Спасибо! Стильно )