如何创建：切换开关

Kuinka luoda vaihtain

Ensimmäinen vaihe - Lisää HTML:ää：

<!-- Neliömäinen vaihtain -->
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<!-- Reunakulmikkoinen vaihtain -->
<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

Toinen vaihe - Lisää CSS:ää：

/* Vaihtimen - liukusäädimen ympärillä oleva kehys */
.switch {
  sijainti: suhteellinen;
  näyttö: inline-block;
  leveys: 60px;
  korkeus: 34px;
}
/* Piilota oletusarvo HTML valintaruutu */
.switch input {
  läpinäkyvyys: 0;
  leveys: 0;
  korkeus: 0;
}
/* Liukusäädin */
.slider {
  sijainti: absoluuttinen;
  kursori: pointer;
  yläreuna: 0;
  vasen: 0;
  oikea: 0;
  alareuna: 0;
  taustaväri: #ccc;
  -webkit-transition: .4s;
  siirtymä: .4s;
}
.slider:before {
  sijainti: absoluuttinen;
  sisältö: "";
  korkeus: 26px;
  leveys: 26px;
  vasen: 4px;
  alareuna: 4px;
  taustaväri: valkoinen;
  -webkit-transition: .4s;
  siirtymä: .4s;
}
input:checked + .slider {
  taustaväri: #2196F3;
}
input:focus + .slider {
  varjo: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: x-siirtymä(26px);
  -ms-transform: x-siirtymä(26px);
  transform: x-siirtymä(26px);
}
/* Reunakulmikkoinen liukusäädin */
.slider.round {
  reunakulma: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

Kokeile itse