css - Twitterブートストラップで入力チェックボックスをスタイル化する方法は?

Question

入力チェックボックスをシンプルにする必要がありますが、ブートストラップである種のオプションのクラスを見つけることができず、github でいくつかのライブラリを検索しても、基盤を作るような単純なものを見つけることができませんでした。

手伝ってくれてありがとう。

Answer 1

これをいじって、何ができるかを理解することができます:

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

それだけでは不十分な場合は、同様の質問に対するこの回答も、ブートストラップ チェックボックスのカスタマイズに関連する CSS の概要を示しています。

Answer 2

入力要素に id (チェックボックスが 1 つだけの場合) またはクラスを追加し、css を定義するだけです。

CSSとHTML

「customId」は、カスタム入力タグに与える ID になります。

<input id="customId" />

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

好きなスタイルを上書きしてください...

重要: スタイルの最後に !important を追加してオーバーライドを強制するだけです