Html 删除引导复选框上的浅蓝色背景

我在一个网站上使用bootstrap4的自定义表单，点击时，指示器后面有一个奇怪的浅蓝色背景（请参见或图片）

我现在玩我的网络控制台，并尝试了不同的事情来摆脱这种背景，但没有成功。 我知道背景在实际输入的焦点上，设置为显示无。。。我尝试过向标签和/或输入添加不同的样式，例如

box shadow:none；大纲：无；背景色：透明等，但它们都不起作用

这就是我在StackOverflow上寻找解决方案的原因。我希望有人能帮忙


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


奇怪的浅蓝色背景在焦点上不知从何处出现


选中BS 4的自定义复选框

这里有一些东西：

Bootply：

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

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

HTML：

.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; 
}

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


选中此自定义复选框
Bootstrap的风格之一是

。自定义控件输入：活动~。自定义控件指示符{颜色：#fff；背景色：#b3d7ff}

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


body.自定义控件输入：活动~.自定义控件指示符{背景色：#ddd}

选中此自定义复选框
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>


记得我吗