如何在 Bootstrap 5 Switch 中更改旋钮的颜色答案

【问题标题】：How to Change Color of Knob in Bootstrap 5 Switch如何在 Bootstrap 5 Switch 中更改旋钮的颜色
【发布时间】：2022-04-21 21:48:13
【问题描述】：

所以我想更改旋钮颜色以匹配我的颜色主题。但是当我打开 bootstrap.css 时，我找不到它的引用。我可以更改边框和阴影，但不能更改旋钮。我能找到的唯一参考是背景图片，我猜是这样的 svg 文件：

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
}

但我不知道如何改变它。是否可以在不创建整个开关的情况下更改此开关？感谢您的帮助。

*图片仅供参考，我想改变什么，我改变了什么

【问题讨论】：

标签： css svg bootstrap-5

【解决方案1】：

如果您正确更改fill 颜色，它将起作用。

这意味着您可以为 # 字符使用带有适当转义 %23 的十六进制颜色。

例如：#cc2222

fill='%23cc2222'/%3e%3c/svg%3e"

或者，您可以使用命名颜色...

例如：red

fill='red'/%3e%3c/svg%3e"

或者，您可以使用带有适当转义符的 RGB 颜色用于括号 (%28,%29)...

例如：rgba(100, 0, 0, .25)

fill='rgba%28100, 0, 0, 0.25%29'/%3e%3c/svg%3e"

Demo

【讨论】：

谢谢，现在我知道这是字符的转义
确保你是否使用 SCSS（或类似的）来取消引用整个 url 部分。可能是您的编译器会以其他方式吃掉它。 :)

【解决方案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>");
}

【讨论】：

【解决方案3】：

开关圆圈的颜色在 SVG (86b7fe) 中定义为“填充”。您可以将其更改为不同的值以更改颜色。 %23 是 url 编码的 #

【讨论】：

所以颜色是86b7fe，不包括23（我还是不知道那是什么）

【解决方案4】：

Scss方式

为已检查和未检查的输入定义变量

第一步

$custom-green: #1CA11C;
$white: #fff;

$form-switch-bg-green-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-green}'/></svg>") !default;
$form-switch-checked-bg-green-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#fff'/></svg>") !default;

第二步

在自定义组件文件中的使用

.form-check {
    &.green &-input {
        background-image: escape-svg($form-switch-bg-green-image);
    }
    &.green &-input:checked {
        background-color: $custom-green;
        border-color: $custom-green;
        background-image: escape-svg($form-switch-checked-bg-green-image);
    }
    &.green &-input:focus {
        border-color: $custom-green;
        outline: 0;
        box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width rgba($custom-green, $input-btn-focus-color-opacity);
          
    }
}

因此，如果 form-check 具有绿色类，则 switch 将是绿色的。

<div class="form-check green form-switch me-3 green">
    <input class="form-check-input" type="checkbox" value="" id="example-switch-default1" name="example-switch-default1" checked>
    <label class="form-check-label" for="example-switch-default1">Aktiv</label>
</div>

我在这里直接添加了box-shadow，它是在实际过程中通过2-3个变量生成的，但所有的变化只是box-shadow的颜色。

【讨论】：