使用复选框类型更改开关标签的背景颜色?

霍夫斯

所以我用materializecss框架为我的网站,我尝试添加所看到这里但是我无法更改已激活开关的颜色。至少对我来说,它使用复杂的CSS。

.switch label input[type=checkbox]:checked + .lever {
  background-color: #84c7c1;
}

例如,如此处所示,您可以看到这是默认CSS,它使开关的背景变为青绿色。而且我无法通过使用ID来更改它。我尝试这样做:

.switch label input[type=checkbox]#profile-switch:checked + .lever#profile-switch {
  background-color: #ffffff;
}

但这似乎没有用。

奎恩·阮(Quynh Nguyen)
<label>
Off
<input id="profile-switch-input" type="checkbox" checked="">
<span id="profile-switch-lever" class="lever"></span>
On
</label>

的CSS

.switch label input#profile-switch-input[type="checkbox"]:checked + #profile-switch-lever.lever::after {
    background-color: #fff;
}

结果

在此处输入图片说明

原来的

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用白色更改复选框背景颜色

更改 UIkit 复选框的背景颜色

使用复选框更改背景颜色,可以选择数量有限的复选框

更改Vuetify复选框标签的颜色?

使用ShinyWidgets更改复选框的颜色

更改禁用的 Material UI 复选框颜色或背景颜色

选中时更改复选框背景颜色

根据 onclick 复选框更改 td 背景颜色

RadioButton 开关以更新复选框标签

@ Html.CheckBoxFor()-更改复选框标签颜色

根据复选框状态更改标签的颜色

复选框 CSS 无法更改复选框的背景颜色

更改复选框的复选框背景颜色选中并取消选中

如何更改实际复选框内 J 复选框的背景颜色

更改复选框的颜色

选中复选框时更改复选框标签的颜色

充当复选框时更改标签的背景

我们如何使用CSS3更改复选框和单选的背景颜色?

如果我要更改输入类型的背景颜色复选框被选中,只使用 CSS?有没有可能?

使用React,单击标签不会更改输入类型复选框的选中值。为什么?

选中复选框时更改复选框颜色?

使用复选框更改行和列的字体颜色

当复选框使用setEnable(true)时更改.setTextColor的颜色

使用 JQuery Validate 更改复选框轮廓颜色

使用jQuery更改未选中的复选框文本的颜色

使用按钮更改样式选中的复选框的颜色

使用复选框的输入来更改按钮的颜色

如何使用复选框更改QGraphicsView背景

jQuery-基于复选框标签背景颜色的CSS颜色