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

Question

所以我正在为我的网站使用 materializecss 框架，我尝试添加一个 as seen here .但是我在更改激活开关的颜色时遇到了麻烦。它使用了复杂的 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;
}

但是好像没有用。

Answer 1

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

结果

原创