Css 如何更改引导复选框的颜色？

我有以下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？

input[type=checkbox]

没有

背景色属性。您可以使用其他方法获得理想的结果：

您可以在div中使用复选框，然后根据需要设置div的样式

<div class="row">
  <input type="checkbox" />
</div>


我已经将
.squaredThree
类改编为您的示例。如果你想看一个活生生的例子，我的答案底部有一个链接

以下是更新后的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以包含另一个
标签
，因为原始的
标签
被用作伪复选框。这是您更新的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>

最后，
复选框
中的复选框大小不太正确，因此需要额外的规则来纠正：

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

显示上述操作。
如果使用引导，需要更改复选框颜色背景，只需覆盖以下样式：


.custom复选框。自定义控件输入：选中~。自定义控件标签：：before{
背景色：绿色！重要；
}
.custom复选框。自定义控件输入：选中：focus~。自定义控件标签：：before{
盒影：0.1px#fff，0.2rem rgba（0,255,0,0.25）
}
.custom复选框。自定义控件输入：focus~。自定义控件标签：：before{
盒影：0.1px#fff，0.2rem rgba（0,0,0,0.25）
}
.custom复选框。自定义控件输入：active~。自定义控件标签：：before{
背景色：#C8FFC8；
}

选中此自定义复选框
安德烈·赖特答案的简单版本：

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #333;
    border-color: #333;
}

伙计，这里回答了这个问题，希望你能成功。你链接到引导CSS的HTML代码不会重现你显示的结果。你是否使用了一些插件或者有一些HTML（缺少引导类？因为一个方法是我的答案有帮助吗？如果没有，请随意提问。我很乐意回答。我已经更新了我的提琴。请查看我答案中的注释。我已经更新了原始链接。谢谢，我尝试了你的第二种方法，我得到的是：它看起来不像我想要的那样…Cou你能给我看一些第一点的例子吗？你能发送一张图片/快照/链接，告诉我你希望它看起来怎么样吗？@Mona所以我想获得一种与我已经得到的效果相似的效果：但是我希望有一种不同的颜色，而不是蓝色（在我的例子中是橙色）非常感谢，我看了你的小提琴，它工作得很好，我还有一个问题-有没有办法更新html代码，这样我就有3个复选框在旁边？我想实现的是这一点，我认为它应该足够复制html代码三次，但这是结果我做错了什么？如果你包装each checkbox和一类
.container
解决了这个问题：Thank you@Yass！！那么有没有办法把这些复选框和它们的标签放在一起而不是放在一起？：）@user3766930你的意思是这样的？回答“昨天”-恰逢其时，即使这个问题现在已经快3岁了；）：D:D我尝试查找解决方案，当我找到时，只需共享它）引导默认样式：
.custom checkbox.custom control输入：checked~.custom control label:：before{background color:#007bff；}
只是覆盖它
*,
::before,
::after {
  box-sizing: initial;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  border-color: #D7B1D7;
  background-color: #D7B1D7;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #333;
    border-color: #333;
}