删除Bootstrap复选框上的浅蓝色背景

Question

我在网站上使用自定义形式的Bootstrap 4，点击指示灯后面有一个奇怪的浅蓝色背景（见BS 4 documentation或图片）。

我现在玩我的网络控制台并尝试了不同的东西来摆脱背景，但没有管理。 我知道背景是实际输入的焦点，设置为不显示...我尝试在标签和/或输入中添加不同的样式，例如box-shadow: none; outline: none; background-color: transparent;等但是没有他们工作了。

这就是我在StackOverflow上搜索解决方案的原因。我希望，有人可以提供帮助。

BS 4的正常未选中自定义复选框

焦点上出现的奇怪浅蓝色背景

BS 4的已检查自定义复选框

Answer 1

这是：

Bootply ：https://www.bootply.com/s82twl3iDl

CSS ：

.custom-control-input~.custom-control-indicator{
     background-color: grey !important; // select the background color
}

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

HTML ：

<label class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Check this custom checkbox</span>
</label>

Answer 2

Bootstrap的一种风格是

.custom-control-input:active~.custom-control-indicator{color:#fff;background-color:#b3d7ff}

因此，如果您不想要它，如果您希望它与非活动阶段具有相同的颜色，只需将其更改回#ddd。

body .custom-control-input:active~.custom-control-indicator {background-color:#ddd}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<label class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Check this custom checkbox</span>
</label>

（注意：我必须在我的选择器前添加body以提高特异性，因为Bootstrap的链接包含在代码段样式下面。
通常这不是必需的，因为Bootstrap通常包含在你自己的样式之前。）

Answer 3

CSS

.custom-control-input:active~.custom-control-label::before {
background-color: #dee2e6;
}

蓝色背景处于活动状态。 聚焦时，出现蓝色边框。您可以将颜色设置为任何所需的颜色。您可以使用以下代码（如下）删除蓝色边框。

.custom-control-input:focus~.custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(222,226,230, .5);
}

HTML

<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="rememberMe" 
name="rememberMe">
<label class="custom-control-label" for="rememberMe">Remember me</label>
</div>