Checkbox & Radio style Bootstrap / Элементы / Сниппеты Bootstrap

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

Категория: Элементы

Bootstrap: 3, 4

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

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

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

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

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

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

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

Рейтинг: 3.8 / 5 - 4 голосов

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

Авторство: https://goo.gl/yNswyi

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

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

Теги: css, CheckBox, Snippet, сниппет, Bootstrap, Radio, element, элемент

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

Добавлено: 2017-06-04 в 16:12

Метка: 1496581957

⇄ ⇅

/*RADIO*/
.radio input[type="radio"] + i:before {
 content: "\f1db"; 
}
.radio input[type="radio"]:checked + i:before {
 content: "\f058"; 
}

/* CHECKBOX&RADIO XS*/
.checkbox-xs input[type="checkbox"] + i:before,
.radio-xs input[type="radio"] + i:before {
 bottom: 0; 
}
.checkbox-xs.indent,
.radio-xs.indent {
 padding-left: 20px; 
}
.checkbox-xs.indent .fa,
 .radio-xs.indent .fa {
 margin-left: -20px; 
}
</style>

<h2 class="text-center">Checkbox & Radio style Bootstrap</h2>

</div></div>

<h3>Checkbox</h3>
 <div class="checkbox">
 <label>
 <input type="checkbox" value="">
 <i class="fa fa-2x icon-checkbox"></i>
 Option one is this and that&mdash;be sure to include why it's great
 </label>
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox" value="" checked>
 <i class="fa fa-2x icon-checkbox"></i>
 Option one is this and that&mdash;be sure to include why it's great
 </label>
 </div>
 <div class="checkbox disabled">
 <label>
 <input type="checkbox" value="" disabled>
 <i class="fa fa-2x icon-checkbox"></i>
 Option is disabled
 </label>
 </div>
 <div class="checkbox disabled">
 <label>
 <input type="checkbox" value="" disabled checked>
 <i class="fa fa-2x icon-checkbox"></i>
 Option is disabled & checked
 </label>
 </div>
<div class="clearfix"></div>

<h3>Radio</h3>
 <div class="radio">
 <label>
 <input type="radio" name="optionsRadios" checked>
 <i class="fa fa-2x icon-radio"></i>
 Option one is this and that&mdash;be sure to include why it's great
 </label>
 </div>
 <div class="radio">
 <label>
 <input type="radio" name="optionsRadios">
 <i class="fa fa-2x icon-radio"></i>
 Option two can be something else and selecting it will deselect option one
 </label>
 </div>
 <div class="radio disabled">
 <label>
 <input type="radio" name="optionsRadios" disabled>
 <i class="fa fa-2x icon-radio"></i>
 Option three is disabled
 </label>
 </div>
 <div class="radio disabled">
 <label>
 <input type="radio" name="optionsRadios-disabled" disabled checked>
 <i class="fa fa-2x icon-radio"></i>
 Option is disabled & checked
 </label>
 </div>
<div class="clearfix"></div>

<h3>Checkbox xs</h3>
 <div class="checkbox checkbox-xs">
 <label>
 <input type="checkbox" value="">
 <i class="fa fa-lg icon-checkbox"></i>
 Option one is this and that&mdash;be sure to include why it's great
 </label>
 </div>
 <div class="checkbox checkbox-xs">
 <label>
 <input type="checkbox" value="" checked>
 <i class="fa fa-lg icon-checkbox"></i>
 Option one is this and that&mdash;be sure to include why it's great
 </label>
 </div>
 <div class="checkbox checkbox-xs disabled">
 <label>
 <input type="checkbox" value="" disabled>
 <i class="fa fa-lg icon-checkbox"></i>
 Option is disabled
 </label>
 </div>
 <div class="checkbox checkbox-xs disabled">
 <label>
 <input type="checkbox" value="" disabled checked>
 <i class="fa fa-lg icon-checkbox"></i>
 Option is disabled & checked
 </label>
 </div>
<div class="clearfix"></div>

<h3>Radio xs</h3>
 <div class="radio radio-xs">
 <label>
 <input type="radio" name="optionsRadios" checked>
 <i class="fa fa-lg icon-radio"></i>
 Option one is this and that&mdash;be sure to include why it's great
 </label>
 </div>
 <div class="radio radio-xs">
 <label>
 <input type="radio" name="optionsRadios">
 <i class="fa fa-lg icon-radio"></i>
 Option two can be something else and selecting it will deselect option one
 </label>
 </div>
 <div class="radio radio-xs disabled">
 <label>
 <input type="radio" name="optionsRadios" disabled>
 <i class="fa fa-lg icon-radio"></i>
 Option three is disabled
 </label>
 </div>
 <div class="radio radio-xs disabled">
 <label>
 <input type="radio" name="optionsRadios-xs-disabled" disabled checked>
 <i class="fa fa-lg icon-radio"></i>
 Option is disabled & checked
 </label>
 </div>
<div class="clearfix"></div>

<h3>Checkbox & Radio indent</h3>
 <div class="checkbox indent">
 <label>
 <input type="checkbox" name="optionsCheckboxs">
 <i class="fa fa-2x icon-checkbox"></i>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ea amet quisquam odio nesciunt rerum, perspiciatis at, commodi quo harum quis illum qui, vitae ut optio suscipit distinctio ipsum pariatur.
 </label>
 </div>
 <div class="radio indent">
 <label>
 <input type="radio" name="optionsRadiosIndent">
 <i class="fa fa-2x icon-radio"></i>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ea amet quisquam odio nesciunt rerum, perspiciatis at, commodi quo harum quis illum qui, vitae ut optio suscipit distinctio ipsum pariatur.
 </label>
 </div>
<div class="clearfix"></div>

<h3>Checkbox-xs - Radio-xs indent</h3>
 <div class="checkbox checkbox-xs indent">
 <label>
 <input type="checkbox" name="optionsCheckboxs">
 <i class="fa fa-lg icon-checkbox"></i>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ea amet quisquam odio nesciunt rerum, perspiciatis at, commodi quo harum quis illum qui, vitae ut optio suscipit distinctio ipsum pariatur.
 </label>
 </div>
 <div class="radio radio-xs indent">
 <label>
 <input type="radio" name="optionsRadiosXsIndent">
 <i class="fa fa-lg icon-radio"></i>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ea amet quisquam odio nesciunt rerum, perspiciatis at, commodi quo harum quis illum qui, vitae ut optio suscipit distinctio ipsum pariatur.
 </label>
 </div>

</div></div></div>

BootstrapTema

Checkbox & Radio style Bootstrap

Скриншот

Подробнее

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

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

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