Как изменить цвет центрального круга выбранного переключателя

Question

Как изменить цвет центрального круга выбранной радиокнопки, я не знаю, как применить CSS для достижения этой цели. Если я не уверен с моими сомнениями, пожалуйста, оставьте комментарий.

<div Name="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"></input>
        <label class="form-check-label" for="inlineRadio1">1</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"></input>
        <label class="form-check-label" for="inlineRadio2">2</label>
      </div>
    </div>

Answer 1

Подход SCSS

Правильный способ сделать это - посмотреть на переменную $custom-radio-indicator-icon-checked в настройке Компас => \bootstrap\scss\_variables.scss.

$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;

Здесь вы можете найти использование $custom-control-indicator-checked-color, которое указывает на возможность изменения цвета и цвета фона.

$custom-control-indicator-checked-color: $component-active-color !default;
$custom-control-indicator-checked-bg: $component-active-bg !default;

Следовательно, изменение $component-active-color или $component-active-bg.

$component-active-color: $white !default;
$component-active-bg: theme-color("primary") !default;

Таким образом, вы можете изменить цвет непосредственно внутри переменной или на уровне компонента, чтобы изменить все индикаторы следующих компонентов:

• настраиваемый флажок
• настраиваемое радио
• выпадающий список
• nav-pills
• нумерация страниц
• list-group

---

CSS подход

Теперь давайте предположим, что у вас нет настройки SCSS, и вы просто пытаетесь переопределить цвет с помощью CSS . Вам нужно будет найти псевдокласс соответствующей метки :after.

.custom-radio .custom-control-input:checked~.custom-control-label::after {
    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='%23fff'/%3e%3c/svg%3e);
}

Здесь вы ищете свойство fill. Знак хеша (#) был заменен на %23. Кроме этого это шестнадцатеричное значение. Это для круга!

Изменение border-color и background-color для самого флажка определено в псевдоклассе :before:

.custom-control-input.is-valid:checked~.custom-control-label::before, 
.was-validated .custom-control-input:valid:checked~.custom-control-label::before {
    border-color: #34ce57;
    background-color: #34ce57;
}

Обратите внимание, что есть некоторый дополнительный вес (проверка, состояние проверено или нет) для этих селекторов, чтобы он работал.