如何从复选框中删除蓝色边框（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/hussainabid/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，您也可以be more specific。

---

示例：

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

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<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>

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

Answer 2

标准边框轮廓未定义蓝色边框。相反，它是由带有box-shadow属性的引导程序设置的，您需要像这样覆盖

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