制作两个不同配色的Materialize开关遇到问题求助

嘿，我一眼就看出问题所在啦！你遇到的开关消失情况，是因为Materialize的开关组件依赖原生的.switch类来加载基础样式，而你把外层容器的类直接换成了.switch-1和.switch-2，丢掉了核心的.switch类，导致框架的基础布局和样式没被应用，开关自然就“隐身”了。

修复方案 #

给外层的div同时保留.switch类和你的自定义类（.switch-1/.switch-2），这样既可以让Materialize的基础开关样式生效，又能通过自定义类来覆盖配色。

修改后的HTML #

<div class="switch switch-1" align="center">
  <label>
    1 OFF
    <input id="Switch1" type="checkbox">
    <span class="lever"></span>
    1 ON
  </label>
</div>
<div class="switch switch-2" align="center">
  <label>
    2 OFF
    <input id="Switch2" type="checkbox">
    <span class="lever"></span>
    2 ON
  </label>
</div>

你的CSS可以保留不变 #

.switch-1 label .lever { background-color: #79ff4d; }
.switch-1 label input[type=checkbox]:checked+.lever { background-color: #ff6666; }
.switch-1 label input[type=checkbox]:checked+.lever:after { background-color: #ff3300; }

.switch-2 label .lever { background-color: #79ff4d; }
.switch-2 label input[type=checkbox]:checked+.lever { background-color: #a6a6a6; }
.switch-2 label input[type=checkbox]:checked+.lever:after { background-color: #737373; }

这样修改后，两个开关都会正常显示，并且各自的配色方案也会按照你的设置生效啦！

内容的提问来源于stack exchange，提问作者ketcham