Bootstrap 4：自定义复选框边框

Question

我正在尝试自定义复选框的颜色。我按照文档进行了操作，并想出了一种更改背景的方法：

.custom-control-input:checked ~ .custom-control-indicator {
        background-color: #ffa500;
}

如果您单击复选框，则还有一个蓝色边框（我认为）框本身有一个填充，但即使进行了一些研究，我也无法找到如何更改该边框的颜色。任何人都可以帮助我吗？我做了一个fiddle 来展示我所拥有的。

有谁知道如何更改边框？

提前致谢！

Answer 1

您可以使用自定义边框：

input[type="checkbox"]{
    width: 20px;
    height: 20px;
}
    #with{
        outline: 1px solid #f00;
    }

#shadow-checkbox{
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}

<div class="checkbox">
  <label>
      <input type="checkbox" value="abc" id="with" />
      Option one
  </label>
</div>
<div class="checkbox">
  <label>
      <input type="checkbox" value="" id="shadow-checkbox"/>
      Option one
  </label>
</div>

Answer 2

要在 Bootstrap v4.0.0 中移除蓝色边框并将活动状态背景重置为#fff，请使用：

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}
.custom-control-input:active ~ .custom-control-label::before {
    background-color: #fff;
}

Answer 3

Bootstrap 4 使用 box-shadow 来获得此效果：

.custom-control-input:focus~.custom-control-indicator {
    -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0275d8;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0275d8;
}

圆角边框用border-radius定义：

.custom-checkbox .custom-control-indicator {
    border-radius: .25rem;
}