如何从复选框中删除蓝色边框（Bootstrap 4.1）

Question

Bootstrap 4.1

如何从焦点上显示的复选框中删除蓝色边框？

我尝试使用轮廓，但是它不起作用。

我使用的代码是：

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

实时版本或示例是：https : //jsfiddle.net/hus​​sainabid/mgdjprst/

Answer 1

box-shadow以下规则有一个：.custom-control-input:focus ~ .custom-control-label::before。您可以通过添加以下CSS（在Bootstrap CSS之后）将其删除：

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow:none !important;
}

注意：代替!important您也可以更具体。

例：

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow:none !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow:none !important;
}

我不知道为什么这个问题被重复了。这与outline属性无关。Bootstrap用添加自己的轮廓box-shadow。