[解決済み] bootstrapのチェックボックスの色を変更するには？

質問

以下のようなhtmlコードを持っています。

<div class="container">
  <form name="queryForm" class="form-inline text-center">
    <p class="checkbox-inline">
      <input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">Other</p>
   </form>
 </div>

となり、その結果

この色を指定された色、例えばD7B1D7に変更する最も簡単な方法は何でしょうか？

どのように解決するのですか？

を適応させました。 .squaredThree クラスは、この コードペン をご覧ください。私の回答の一番下にFiddleのリンクがありますので、実際の例をご覧になりたい方はそちらをご覧ください。

更新されたCSSはこちらです。

/* .squaredThree */
.squaredThree {
  position: relative;
  float:left;
}

.squaredThree label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #D7B1D7;
  border-radius: 4px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
}

.squaredThree label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredThree label:hover::after {
  opacity: 0.3;
}

.squaredThree input[type=checkbox] {
  visibility: hidden;
}

.squaredThree input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* end .squaredThree */

HTMLを更新して、もうひとつの label として、元の label は擬似的なチェックボックスとして使用されます。これがあなたの更新したHTMLです。

<div class="container">
  <form name="queryForm" class="form-inline">
    <div class="squaredThree">
      <input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">
      <label for="checkOther"></label>
    </div>
    <label class="label-text">Other</label>
  </form>
</div>

を追加したことに注意してください。 label の外側に存在します。 .squaredThree div . その label は、クラスが .label-text の右側にテキストを少し移動させるために、いくつかの追加のスタイリング・ルールが必要であるためです。 checkbox :

.label-text {
  position: relative;
  left: 10px;
}

最後に、チェックの大きさを checkbox というルールを追加する必要があります。

*,
::before,
::after {
  box-sizing: initial;
}

フィドルデモ を表示します。