Html 如何更改复选框背景色?
我将用于我的UI并创建一个复选框:Html 如何更改复选框背景色?,html,css,material-components-web,Html,Css,Material Components Web,我将用于我的UI并创建一个复选框: <div class="mdc-form-field"> <div class="mdc-checkbox"> <input type="checkbox" class="mdc-checkbox__native-control" id="checkbox-1"/> <div class="mdc-checkbox__background">
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="checkbox-1"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
<label for="checkbox-1">Checkbox 1</label>
</div>
复选框1
像这样:
如何将复选框背景更改为其他颜色,例如红色?他们使用另一个元素来设置复选框的样式 元素是:
选择器是这样的:
.mdc-checkbox\u本机控制:已启用:已选中~.mdc-checkbox\u后台、.mdc-checkbox\u本机控制:已启用:不确定~.mdc-checkbox\u后台
因此,您只需在样式表中添加以下行:
.mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
border-color: red;
background-color: red;
}
提示:在firefox或chrome上使用开发工具。右键单击要检查的元素,然后单击inspect
选项
祝你好运,享受代码
它有自己的后台类,就像您检查并看到
复选框的结构上有div
.mdc-checkbox\u后台出现了类,您可以使用进行简单更改!重要信息
覆盖默认值
您可以使用--mdc-theme-secondary:#ff0000
更改颜色:
<div class="mdc-form-field">
<div class="mdc-checkbox" style="--mdc-theme-secondary:#ff0000">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="checkbox-1"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
<label for="checkbox-1">Checkbox 1</label>
</div>
复选框1
如果您使用的是SASS,您可以使用材料的一种SASS混合(可在底部找到文档):
我使用matrial.io组件,您需要更改
的颜色,您可以通过CSA进行更改,实际上您不需要!重要提示(:@A.Meshu同意,但就我而言,我使用的是内部组件样式,因此需要它与deep
selector:)
<div class="mdc-form-field">
<div class="mdc-checkbox" style="--mdc-theme-secondary:#ff0000">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="checkbox-1"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
<label for="checkbox-1">Checkbox 1</label>
</div>
@import '@material/checkbox/mixins';
@include mdc-checkbox-container-colors($marked-fill-color: red);