Красивые чекбоксы

zero50x

Aug 4th, 2017

148

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

HTML 2.51 KB | None | 0 0

raw download clone embed print report

<label>
<input class="checkbox" type="checkbox" name="checkbox-test">
<span class="checkbox-custom"></span>
<span class="label">Lorem ipsum dolor</span>
</label>
/* Скрываем реальный чекбокс */
.checkbox {
display: none;
}
/* Задаем внешний вид для нашего кастомного чекбокса. Все обязательные свойства прокомментированы, остальные же свойства меняйте по вашему усмотрению */
.checkbox-custom {
position: relative; /* Обязательно задаем, чтобы мы могли абсолютным образом позиционировать псевдоэлемент внютри нашего кастомного чекбокса */
width: 2.5rem; /* Обязательно задаем ширину */
height: 2.5rem; /* Обязательно задаем высоту */
border: 0.2rem solid #ccc;
border-radius: 3px;
}
/* Кастомный чекбокс и лейбл центрируем по вертикали. Если вам это не требуется, то вы можете убрать свойство vertical-align: middle из данного правила, но свойство display: inline-block обязательно должно быть */
.checkbox-custom,
.label {
display: inline-block;
vertical-align: middle;
}
/* Если реальный чекбокс у нас отмечен, то тогда добавляем данный признак и к нашему кастомному чекбоксу */
.checkbox:checked + .checkbox-custom::before {
content: ""; /* Добавляем наш псевдоэлемент */
display: block; /* Делаем его блочным элементом */
position: absolute; /* Позиционируем его абсолютным образом */
/* Задаем расстояние от верхней, правой, нижней и левой границы */
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
background: #fff; /* 413548 Добавляем фон. Если требуется, можете поставить сюда картинку в виде "галочки", которая будет символизировать, что чекбокс отмечен */
border-radius: 2px;
}

Add Comment

Please, Sign In to add comment