如何更改所选单选按钮中心圆的颜色 [英] How to to change the color of selected radio button's center circle
问题描述
如何更改所选单选按钮中心圆的颜色,我不知道如何应用CSS来实现此目的.如果不确定我是否有疑问,请发表评论.
How to change the color of selected radio button's center circle, I don't know how to apply css to acheive this. If I am not clear with my doubt please post a comment.
<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>
推荐答案
SCSS方法
正确的方法是查看指南针设置 =>中的变量$custom-radio-indicator-icon-checked
. \bootstrap\scss\_variables.scss
.
SCSS approach
The right way to do this is by looking at the variable $custom-radio-indicator-icon-checked
in the Compass setup => \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
的用法,它使您可以选择更改颜色和背景色的选项.
Here you can find the use of $custom-control-indicator-checked-color
which points you to the option(s) of changing color and background-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;
因此,您可以直接在变量内部或在组件级别更改颜色,以更改以下组件的所有指示符:
So you can change the color directly inside the variable or on component level to change all indicators of the following components:
- 自定义复选框
- 自定义广播
- 下拉列表
- nav-pills
- 分页
- 列表组
现在让我们假设您没有SCSS设置,而您只是想通过CSS覆盖颜色.您必须找到关联标签的伪类:after
.
Now let's assume you don't have a SCSS setup and you're simply trying to override the color by CSS. You'll have to find the associated label's pseudo class :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
.除此之外,它是一个十六进制值.那是为了圈子!
Here you're looking for the fill
property. The hash sign (#) was replaced by %23
. Other than that it's a hexadecimal value. That's for the circle!
为复选框本身更改border-color
和background-color
是在伪类:before
上定义的:
Changing the border-color
and background-color
for the checkbox itself is defined on the pseudo class :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;
}
请注意,这些选择器还需要额外权重(验证,状态检查与否)以使其起作用.
Please note there's some additional weight (validation, state checked or not) to these selectors to make it work.
这篇关于如何更改所选单选按钮中心圆的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!