如何更改此 Bootstrap 4 切换开关的“选中”背景颜色？

Question

我不知道如何更改此 Bootstrap 4 切换开关的“选中”背景颜色。它使用额外的库来切换深色和浅色模式 \xe2\x80\x93 Here on github \xe2\x80\x93 但这是有效的。我想要做的就是更改活动复选框的背景颜色，默认情况下为蓝色。Bootstrap CSS 默认为蓝色吗？这个答案更改 Bootstrap 4 复选框背景颜色对我不起作用；它更改了未选中的颜色，但我无法从中 grep 如何更改选中的颜色。

\n

在这里摆弄

\n

我的代码在这里：

\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n

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

Answer 2

只需将其添加到您的 css 文件中，或将其添加到<style>...之间的 html 文件</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>");
}