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

【问题标题】：Remove light blue background on Bootstrap checkboxes删除 Bootstrap 复选框上的浅蓝色背景
【发布时间】：2018-12-15 23:35:56
【问题描述】：

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

我现在玩弄我的网络控制台并尝试了不同的方法来摆脱这种背景，但没有成功。我知道背景是实际输入的焦点，它设置为不显示...我尝试向标签和/或输入添加不同的样式，例如box-shadow: none; outline: none; background-color: transparent; 等，但它们都不起作用.

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

BS 4 的普通未选中的自定义复选框

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

BS 4 的选中自定义复选框

【问题讨论】：

标签： html css twitter-bootstrap checkbox

【解决方案1】：

这里有一些东西：

引导层：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>

【讨论】：

【解决方案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 的链接包含在 sn-p 样式下方。
通常这不是必需的，因为 Bootstrap 通常包含在您自己的样式之前。）

【讨论】：

【解决方案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>

【讨论】：