Я должен сделать флажок ввода простым, но не смог найти какой-то дополнительный класс в бутстрапе, также искал в github какую-то библиотеку и не мог найти ничего простого, как создание основы.
Спасибо за помощь.
Я должен сделать флажок ввода простым, но не смог найти какой-то дополнительный класс в бутстрапе, также искал в github какую-то библиотеку и не мог найти ничего простого, как создание основы.
Спасибо за помощь.
Просто добавьте id (если это всего лишь один флажок) или класс к этому элементу ввода и определите css для него:
CSS и HTML
"customId" будет идентификатором, который вы указываете для пользовательского тега ввода:
<input id="customId" />
input#customId{
background: #888 !important;
border: none !important;
color: #000 !important;
}
jsut переписать все стили, которые вы хотите...
ВАЖНО: просто добавьте! Важно до конца стиля, чтобы заставить переопределить
Вы можете играть с этим, чтобы понять, что можно сделать:
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
@import url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css');
input[type="checkbox"] {
display: none;
}
.custom-check {
display: inline-block;
width: 25px; height: 25px;
background: white;
border: 1px solid #CCCCCC;
font-family: 'Glyphicons Halflings';
font-size: 22px;
line-height: 1;
}
.custom-check::before {
content: "\e013";
color: #424242;
display: none;
}
input[type=checkbox]:checked+.custom-check::before {
display: block;
color: white;
background-color: #554236;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div>
<label >
<input type="checkbox">
<span class="custom-check"></span>
My Checkbox
</label>
</div>