4

所以我想改变旋钮颜色以匹配我的颜色主题。但是当我打开 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");
}

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

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

旋钮

4

3 回答 3

5

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"

演示

于 2020-12-11T14:26:10.197 回答
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>");
}
于 2021-09-20T07:57:26.750 回答
0

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

于 2020-12-11T06:59:07.187 回答