使用復選框類型更改開關標簽的背景顏色？

Question

所以我用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;
}

但這似乎沒有用。

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

結果

原版的