как стилизовать входной флажок в twitter bootstrap?

Я должен сделать флажок ввода простым, но не смог найти какой-то дополнительный класс в бутстрапе, также искал в github какую-то библиотеку и не мог найти ничего простого, как создание основы.

Спасибо за помощь.

Ответ 1

Просто добавьте id (если это всего лишь один флажок) или класс к этому элементу ввода и определите css для него:

CSS и HTML

"customId" будет идентификатором, который вы указываете для пользовательского тега ввода:

<input id="customId" />

input#customId{
   background: #888 !important;
   border: none !important;
   color: #000 !important;
}

jsut переписать все стили, которые вы хотите...

ВАЖНО: просто добавьте! Важно до конца стиля, чтобы заставить переопределить

Ответ 2

Вы можете играть с этим, чтобы понять, что можно сделать:

@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>