How to customise color in Switches on Bootstrap-CodePudding

i have retrieved the code from 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>

how to customize the css? to make it exactly like this

CodePudding user response：

You could add these CSS rules as a stating point :

.form-switch .form-check-input {
        width: 3em !important;
        background-image: url("data:image/svg xml,") !important;
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg xml,") !important;
}

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>