如何更改此 Bootstrap 4 拨动开关的“已检查”背景颜色？答案

【问题标题】：How can I change the "checked" background color of this Bootstrap 4 toggle switch?如何更改此 Bootstrap 4 拨动开关的“已检查”背景颜色？
【发布时间】：2020-10-19 21:27:08
【问题描述】：

我不知道如何更改此 Bootstrap 4 切换开关的“已检查”背景颜色。它使用一个额外的库来切换深色和浅色模式 - Here on github - 但它有效。我要做的就是更改活动复选框的背景颜色，默认为蓝色。它在 Bootstrap CSS 中默认为蓝色吗？这个答案Change Bootstrap 4 checkbox background color 对我不起作用；它会更改未选中的颜色，但我无法从中获取如何更改选中的颜色。

Fiddle here

我的代码在这里：

.custom-control-input {
  background-color: red;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="darkSwitch" />
  <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>

【问题讨论】：

标签： css checkbox bootstrap-4

【解决方案1】：

您可以简单地更改所有可能影响颜色的属性，例如

.custom-control-input:checked、.custom-control-label::before、.custom-control-input:active 和 .custom-control-input:focus

但你必须注意更改.custom-control-input::after，因为它会破坏拨动开关内的指针

示例

.custom-control-input:focus~.custom-control-label::before {
  border-color: red !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 47, 69, 0.25) !important;
}

.custom-control-input:checked~.custom-control-label::before {
  border-color: red !important;
  background-color: red !important;
}

.custom-control-input:active~.custom-control-label::before {
  background-color: red !important;
  border-color: red !important;
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: red !important;
}

.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
  background-color: red !important;
  border-color: red !important;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="darkSwitch" />
  <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>

【讨论】：

谢谢！这很好用。有没有办法在活动时摆脱蓝色边框？我在开发工具中看不到边框 CSS。
它实际上不是border，而是box-shadow，您可以根据需要更改它
如果你想留下box-shadow，你可以在我的代码中轻松删除那些box-shadow，但我认为这不是一个好主意，因为它看起来有点难看
这很有趣；在我的网站中删除它并不能消除蓝框阴影。
对不起，我试图理解这个问题，但我真的不明白它是什么，你能给我解释一下吗

【解决方案2】：

只需将其添加到您的 css 文件中，或将其添加到您的 html 文件中 <style> ... </style> 之间，即可更改开关的背景颜色 - 它还会删除蓝色圆圈和阴影。 =]

.form-switch .form-check-input {
    height: 24px;
    width: 48px;
}
.form-switch .form-check-input:focus {
    border-color: rgba(0, 0, 0, 0.25);
    outline: 0;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}
.form-switch .form-check-input:checked {
    background-color: #30D158;
    border-color: #30D158;
    border: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}

【讨论】：