如果您使用bootstrap并需要更改复选框的背景颜色，只需覆盖此样式：
第一个

我已经将.squaredThree类从这个CodePen中修改为你的例子。如果你想看一个真实的例子，在我的答案的底部有一个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存在于.squaredThreediv之外。label有一个.label-text类，因为需要一些额外的样式规则来将文本稍微移动到checkbox的右侧：

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

最后，checkbox中的检查大小不太正确，因此需要一个额外的规则来纠正这一点：

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

Fiddle Demo显示了上述操作。

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

AndrewRIGHT答案的简单版本：

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

input[type=checkbox]没有background-color属性。您可以使用其他方法来取得想要的结果：
1.您可以在div内使用该复选框，然后根据需要设置div的样式。

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

1.您可以使用如下所示的伪元素：

input[type=checkbox] {
     cursor: pointer;
  }

 input[type=checkbox]:after {
  content: " ";
  background-color: #D7B1D7;
  display: inline-block;
  visibility: visible;
 }

 input[type=checkbox]:checked:after {
   content: "\2714";
 }

对于Bootstrap 4，@AndrewRIGHT的答案是可以的（我如何改变Bootstrap复选框的颜色？），但是，如果你使用Bootstrap 5，则需要以下样式。
第一个

这对我来说很有用，改变react-bootstrap中复选框的背景颜色。

input[type=checkbox]{
    accent-color: green;
}