Verwenden Sie reines CSS, um einen Switch-Effekt zu erzielen

<label für="ck2">
  <Eingabetyp="Kontrollkästchen" id="ck2">
  <span>Wenn nicht ausgewählt, schalten Sie den Schalter aus</span>
</Bezeichnung>
<br>
<label für="ck1">
  <input type="checkbox" id="ck1" aktiviert>
  <span>Falls ausgewählt, schalten Sie den Schalter ein</span>
</Bezeichnung> 

<P>Skizze des ausgeschalteten Zustands</P>
<div Klasse="Umschalten">
  <div Klasse="Cookie"></div>
</div>
<br>
<P>auf Zustandsskizze</P>
<div Klasse="toggle2">
  <div Klasse="cookie2"></div>
</div>
.umschalten{
  Anzeige: Inline-Block;
  Position: relativ;
  Höhe: 25px;
  Breite: 50px;  
  Rahmenradius: 4px;
  Hintergrund: #CC0000;
}
.Plätzchen{
  Position: absolut;
  links: 2px;
  oben: 2px;
  unten: 2px;
  Breite: 50 %;
  Hintergrund: rgba (230,230,230,0,9);
  Rahmenradius: 3px;
}
.toggle2{
  Anzeige: Inline-Block;
  Position: relativ;
  Höhe: 25px;
  Breite: 50px; 
  Polsterung: 2px;
  Rahmenradius: 4px;
  Hintergrund: #66CC33;  
}
.cookie2{
  Position: absolut;
  rechts: 2px;
  oben: 2px;
  unten: 2px;  
  Breite: 50 %;
  Hintergrund: rgba (230,230,230,0,9);
  Rahmenradius: 3px;
} 

<label für="ck4">
  <Eingabetyp="Kontrollkästchen" id="ck4">
  <div Klasse="Umschalten">
    <div Klasse="Cookie"></div>
  </div>
</Bezeichnung>
<br>
<label für="ck3">
  <input type="checkbox" id="ck3" aktiviert>
  <div Klasse="toggle2">
    <div Klasse="cookie2"></div>
  </div>
</Bezeichnung> 

<label für="ck5">
  <Eingabetyp="Kontrollkästchen" id="ck5">
  <div Klasse="Umschalten-Beenden">
    <div Klasse="cookie-finish"></div>
  </div>
</Bezeichnung>
<br>
<label für="ck6">
  <input type="checkbox" id="ck6" aktiviert>
  <div Klasse="Umschalten-Beenden">
    <div Klasse="cookie-finish"></div>
  </div>
</Bezeichnung>
.toggle-finish{
  Cursor:Zeiger;
  Anzeige: Inline-Block;
  Position: relativ;
  Höhe: 25px;
  Breite: 50px;  
  Rahmenradius: 4px;
  Hintergrund: #CC0000;
}
.cookie-finish{
  Position: absolut;
  links: 2px;
  oben: 2px;
  unten: 2px;
  Breite: 50 %;
  Hintergrund: rgba (230,230,230,0,9);
  Rahmenradius: 3px;
}
Eingabe: aktiviert + .toggle-finish{
  Hintergrund: #66CC33;  
}
Eingabe: aktiviert + .toggle-finish .cookie-finish{ 
  links: automatisch;
  rechts: 2px;
}