Создание двух материализованных переключателей разных цветов - PullRequest
Новая
       7

Создание двух материализованных переключателей разных цветов

0 голосов
/ 16 мая 2018

Мне удалось сделать один переключатель материализации, и он выглядит великолепно, но теперь я хочу второй переключатель - с настройкой цвета, отличной от моей первой.Это код, который я хочу запустить, но мои переключатели просто исчезают, когда я пытаюсь изменить имя класса !!Любая помощь будет принята с благодарностью !!!

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

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Попробуйте это: 

  <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;
}
0 голосов
/ 16 мая 2018

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