Как изменить цвет ручки в переключателе Bootstrap 5

#css #svg #bootstrap-5

Вопрос:

Итак, я хочу изменить цвет ручки в соответствии с моей цветовой темой. Но когда я открываю bootstrap.css, я не смог найти ссылку на это. Я могу изменить границу и тень, но не ручку. Единственная ссылка, которую я могу найти, — это фоновое изображение с, я думаю, svg-файлом, подобным этому:

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

Но я не знаю, как это изменить.
Можно ли изменить это, не создавая весь переключатель? Спасибо за помощь.

* изображение для справки о том, что я хочу изменить и что я изменил

Ответ №1:

Это сработает, если вы fill правильно измените цвет.

Это означает, что вы можете использовать шестнадцатеричный цвет с соответствующим escape # для # символа.

Например: #cc2222

fill='#cc2222'/>"

Или же вы можете использовать именованный цвет…

Например: red

fill='red'/>"

Или вы можете использовать цвет RGB с соответствующими символами для скобок ((,))…

Например: rgba(100, 0, 0, .25)

fill='rgba(100, 0, 0, 0.25)'/>"

ДЕМОНСТРАЦИЯ

1. Спасибо, теперь я знаю, что это escape для символа

2. Убедитесь, что при использовании SCSS (или similare) вся часть 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'><circle 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'><circle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}

Ответ №3:

Способ Scss

Определите переменные для проверенного и непроверенного ввода

Шаг-1

 $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>") !defau<
$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>") !defau<

Шаг-2

Использование в файле пользовательского компонента

 .form-check {
    amp;.green amp;-input {
        background-image: escape-svg($form-switch-bg-green-image);
    }
    amp;.green amp;-input:checked {
        background-color: $custom-green;
        border-color: $custom-green;
        background-image: escape-svg($form-switch-checked-bg-green-image);
    }
    amp;.green amp;-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);
          
    }
}

Таким образом, если проверка формы имеет зеленый класс, то переключатель будет зеленым.

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

Я добавил сюда непосредственно тень окна, которая генерируется с помощью 2-3 переменных в реальном процессе, но во всех случаях изменяется только цвет тени окна.

Ответ №4:

Цвет круга переключателя определяется как «заливка» в SVG ( 86b7fe ). Вы можете изменить это на другое значение, чтобы изменить цвет. Это # URL-кодированный #