制作两个不同颜色的物化开关

Question

我可以做一个单一的物化开关，它看起来很棒，但现在我想要第二个开关-与我的第一个不同的颜色设置。这是我想要运行的代码，但是当我试图更改类名时，我的开关就会消失！！任何帮助都将不胜感激！

HTML：

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

 <div class="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;
}

Answer 1

试试这个：

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

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

使用此CSS：

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

Answer 2

switch是物化类用于设置元素的方面、使用另一个类并保留switch类的类。

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