如何在 Bootstrap 上的 Switches 中自定义颜色答案

【问题标题】：How to customise color in Switches on Bootstrap如何在 Bootstrap 上的 Switches 中自定义颜色
【发布时间】：2021-10-04 20:45:02
【问题描述】：

我已经从 get bootstrap 中检索到代码

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
    <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

如何自定义css？让它完全像这样

【问题讨论】：

你不能用这段代码做到这一点，因为切换按钮是由我们无法着色的 svg 图像控制的

标签： html css bootstrap-4 bootstrap-5

【解决方案1】：

您可以添加这些 CSS 规则作为说明点：

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

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

.form-check-input, .form-check-input:checked {
    background-color: grey !important;
    border-color: grey !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
    <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

【讨论】：

非常感谢！