Чекбоксы Фанки / Кнопки / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Кнопки

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 225

Количество символов:

Посмотрели: 2956 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.8 / 5 - 6 голосов

Тип лицензии: CC BY 4.0

Авторство: http://u.to/n64vDQ

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, чекбокс, CheckBox, Bootstrap, бутстрап

Поделился: BootstrapТема

Добавлено: 2015-12-04 в 00:11

Метка: 1582118676

⇄ ⇅

.form-group input[type="checkbox"] + .btn-group > label span {
 width: 20px;
}

.form-group input[type="checkbox"] + .btn-group > label span:first-child {
 display: none;
}
.form-group input[type="checkbox"] + .btn-group > label span:last-child {
 display: inline-block; 
}

.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
 display: inline-block;
}
.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
 display: none; 
}
</style>

<div class="container">
 <div class="[ col-md-4 col-md-offset-2 ]">
 <div class="[ form-group ]">
 <input type="checkbox" name="fancy-checkbox-default" id="fancy-checkbox-default" autocomplete="off" />
 <div class="[ btn-group ]">
 <label for="fancy-checkbox-default" class="[ btn btn-default ]">
 <span class="[ fa fa-check-square-o ]"></span>
 <span> </span>
 </label>
 <label for="fancy-checkbox-default" class="[ btn btn-default active ]">
 Default Checkbox
 </label>
 </div>
 </div>
 <div class="[ form-group ]">
 <input type="checkbox" name="fancy-checkbox-primary" id="fancy-checkbox-primary" autocomplete="off" />
 <div class="[ btn-group ]">
 <label for="fancy-checkbox-primary" class="[ btn btn-primary ]">
 <span class="[ fa fa-check-square-o ]"></span>
 <span> </span>
 </label>
 <label for="fancy-checkbox-primary" class="[ btn btn-default active ]">
 Primary Checkbox
 </label>
 </div>
 </div>
 <div class="[ form-group ]">
 <input type="checkbox" name="fancy-checkbox-success" id="fancy-checkbox-success" autocomplete="off" />
 <div class="[ btn-group ]">
 <label for="fancy-checkbox-success" class="[ btn btn-success ]">
 <span class="[ fa fa-check-square-o ]"></span>
 <span> </span>
 </label>
 <label for="fancy-checkbox-success" class="[ btn btn-default active ]">
 Success Checkbox
 </label>
 </div>
 </div>
 <div class="[ form-group ]">
 <input type="checkbox" name="fancy-checkbox-info" id="fancy-checkbox-info" autocomplete="off" />
 <div class="[ btn-group ]">
 <label for="fancy-checkbox-info" class="[ btn btn-info ]">
 <span class="[ fa fa-check-square-o ]"></span>
 <span> </span>
 </label>
 <label for="fancy-checkbox-info" class="[ btn btn-default active ]">
 Info Checkbox
 </label>
 </div>
 </div>
 <div class="[ form-group ]">
 <input type="checkbox" name="fancy-checkbox-warning" id="fancy-checkbox-warning" autocomplete="off" />
 <div class="[ btn-group ]">
 <label for="fancy-checkbox-warning" class="[ btn btn-warning ]">
 <span class="[ fa fa-check-square-o ]"></span>
 <span> </span>
 </label>
 <label for="fancy-checkbox-warning" class="[ btn btn-default active ]">
 Warning Checkbox
 </label>
 </div>
 </div>
 <div class="[ form-group ]">
 <input type="checkbox" name="fancy-checkbox-danger" id="fancy-checkbox-danger" autocomplete="off" />
 <div class="[ btn-group ]">
 <label for="fancy-checkbox-danger" class="[ btn btn-danger ]">
 <span class="[ fa fa-check-square-o ]"></span>
 <span> </span>
 </label>
 <label for="fancy-checkbox-danger" class="[ btn btn-default active ]">
 Danger Checkbox
 </label>
 </div>
 </div>
 </div>

<div class="[ col-md-4 col-md-offset-2 ]">
 <div class="[ form-group ]">
 <input type="checkbox" name="fancy-checkbox-default-custom-icons" id="fancy-checkbox-default-custom-icons" autocomplete="off" />
 <div class="[ btn-group ]">
 <label for="fancy-checkbox-default-custom-icons" class="[ btn btn-default ]">
 <span class="[ fa fa-plus ]"></span>
 <span class="[ fa fa-minus ]"></span>
 </label>
 <label for="fancy-checkbox-default-custom-icons" class="[ btn btn-default active ]">
 Default Checkbox
 </label>
 </div>
 </div>
 <div class="[ form-group ]">
 <input type="checkbox" name="fancy-checkbox-primary-custom-icons" id="fancy-checkbox-primary-custom-icons" autocomplete="off" />
 <div class="[ btn-group ]">
 <label for="fancy-checkbox-primary-custom-icons" class="[ btn btn-primary ]">
 <span class="[ fa fa-plus ]"></span>
 <span class="[ fa fa-minus ]"></span>
 </label>
 <label for="fancy-checkbox-primary-custom-icons" class="[ btn btn-default active ]">
 Primary Checkbox
 </label>
 </div>
 </div>
 <div class="[ form-group ]">
 <input type="checkbox" name="fancy-checkbox-success-custom-icons" id="fancy-checkbox-success-custom-icons" autocomplete="off" />
 <div class="[ btn-group ]">
 <label for="fancy-checkbox-success-custom-icons" class="[ btn btn-success ]">
 <span class="[ fa fa-plus ]"></span>
 <span class="[ fa fa-minus ]"></span>
 </label>
 <label for="fancy-checkbox-success-custom-icons" class="[ btn btn-default active ]">
 Success Checkbox
 </label>
 </div>
 </div>
 <div class="[ form-group ]">
 <input type="checkbox" name="fancy-checkbox-info-custom-icons" id="fancy-checkbox-info-custom-icons" autocomplete="off" />
 <div class="[ btn-group ]">
 <label for="fancy-checkbox-info-custom-icons" class="[ btn btn-info ]">
 <span class="[ fa fa-plus ]"></span>
 <span class="[ fa fa-minus ]"></span>
 </label>
 <label for="fancy-checkbox-info-custom-icons" class="[ btn btn-default active ]">
 Info Checkbox
 </label>
 </div>
 </div>
 <div class="[ form-group ]">
 <input type="checkbox" name="fancy-checkbox-warning-custom-icons" id="fancy-checkbox-warning-custom-icons" autocomplete="off" />
 <div class="[ btn-group ]">
 <label for="fancy-checkbox-warning-custom-icons" class="[ btn btn-warning ]">
 <span class="[ fa fa-plus ]"></span>
 <span class="[ fa fa-minus ]"></span>
 </label>
 <label for="fancy-checkbox-warning-custom-icons" class="[ btn btn-default active ]">
 Warning Checkbox
 </label>
 </div>
 </div>
 <div class="[ form-group ]">
 <input type="checkbox" name="fancy-checkbox-danger-custom-icons" id="fancy-checkbox-danger-custom-icons" autocomplete="off" />
 <div class="[ btn-group ]">
 <label for="fancy-checkbox-danger-custom-icons" class="[ btn btn-danger ]">
 <span class="[ fa fa-plus ]"></span>
 <span class="[ fa fa-minus ]"></span>
 </label>
 <label for="fancy-checkbox-danger-custom-icons" class="[ btn btn-default active ]">
 Danger Checkbox
 </label>
 </div>
 </div>
 </div>
</div>

BootstrapTema

Чекбоксы Фанки

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0