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
分页
列表组

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

请注意，这些选择器还需要额外权重（验证，状态检查与否）以使其起作用。

如何更改所选单选按钮中心圆的颜色

1 个答案:

SCSS方法

CSS方法