スイッチラベルの背景色をチェックボックスタイプで変更しますか？

Question

私は自分のウェブサイトにmaterializecssフレームワークを使用しています。私はhereのようにaを追加しようとしました。しかし、私は活性化されたスイッチの色を変えることに問題があります。それは少なくとも私にとっては複雑な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; 
} 

結果

オリジナル