Bootstrap 4 如何更改所选单选按钮的颜色';s中心圆

Bootstrap 4 如何更改所选单选按钮的颜色';s中心圆,bootstrap-4,Bootstrap 4,如何更改选定单选按钮中心圆的颜色,我不知道如何将css应用于此。如果我不清楚我的疑问,请发表评论 <div Name="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"></input> <label c

如何更改选定单选按钮中心圆的颜色,我不知道如何将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>

1.
2.
SCSS方法 正确的方法是查看指南针设置中选中的变量
$custom radio indicator图标
=>
\bootstrap\scss\\u 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;
因此,您可以直接在变量内部或组件级别更改颜色,以更改以下组件的所有指示器:

  • 自定义复选框
  • 定制收音机
  • 下拉列表
  • 导航药丸
  • 分页
  • 列表组

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
。除此之外,它是一个十六进制值。那是圆的

更改复选框本身的
边框颜色和
背景颜色是在伪类
: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;
}
请注意,这些选择器还有一些额外的权重(验证、状态已检查或未检查)使其工作