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

Поэтому я хочу изменить цвет ручки, чтобы он соответствовал моей цветовой теме. Но когда я открываю 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

11.12.2020 04:31

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

5 855

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

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

Итак, цвет 86b7fe, 23 не включен (я до сих пор не знаю, что это такое)

— 11.12.2020 13:24

11.12.2020 07:59

Ответ принят как подходящий

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

Это означает, что вы можете использовать шестнадцатеричный цвет с соответствующим escape-кодом %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"

Демо

Спасибо, теперь я знаю, что это побег для персонажа

— 11.12.2020 17:57

Убедитесь, что вы используете SCSS (или аналогичный), чтобы убрать из кавычек всю часть URL. Может быть, ваш компилятор съест его другими способами. :)

— 21.08.2021 19:34

11.12.2020 15:26

Просто добавьте это в свой файл 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>");
}

20.09.2021 09:57

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>") !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;

Шаг 2

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

.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);
          
    }
}

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

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

21.04.2022 15:48