純粋なCSSを使用してスイッチ効果を実現する

<ラベル>
  <入力タイプ="チェックボックス" id="ck2">
  <span>選択されていない場合はスイッチをオフにします</span>
</ラベル>
<br>
<ラベル="ck1">
  <input type="checkbox" id="ck1" チェック済み>
  <span>選択した場合はスイッチをオンにします</span>
</ラベル> 

<P>オフステートスケッチ</P>
<div class="toggle">
  <div class="cookie"></div>
</div>
<br>
<P>州のスケッチについて</P>
<div class="toggle2">
  <div class="cookie2"></div>
</div>
。トグル{
  表示:インラインブロック;
  位置:相対;
  高さ:25px;
  幅:50px;  
  境界線の半径:4px;
  背景:#CC0000;
}
。クッキー{
  位置:絶対;
  左:2px;
  上:2px;
  下:2px;
  幅:50%;
  背景:rgba(230,230,230,0.9);
  境界線の半径:3px;
}
.toggle2{
  表示:インラインブロック;
  位置:相対;
  高さ:25px;
  幅:50px; 
  パディング:2px;
  境界線の半径:4px;
  背景:#66CC33;  
}
.クッキー2{
  位置:絶対;
  右:2px;
  上:2px;
  下:2px;  
  幅:50%;
  背景:rgba(230,230,230,0.9);
  境界線の半径:3px;
} 

<ラベル="ck4">
  <入力タイプ="チェックボックス" id="ck4">
  <div class="toggle">
    <div class="cookie"></div>
  </div>
</ラベル>
<br>
<ラベル>
  <input type="checkbox" id="ck3" チェック済み>
  <div class="toggle2">
    <div class="cookie2"></div>
  </div>
</ラベル> 

<ラベル>
  <入力タイプ="チェックボックス" id="ck5">
  <div class="toggle-finish">
    <div class="cookie-finish"></div>
  </div>
</ラベル>
<br>
<ラベル="ck6">
  <input type="checkbox" id="ck6" チェック済み>
  <div class="toggle-finish">
    <div class="cookie-finish"></div>
  </div>
</ラベル>
.toggle-finish{
  カーソル:ポインタ;
  表示:インラインブロック;
  位置:相対;
  高さ:25px;
  幅:50px;  
  境界線の半径:4px;
  背景:#CC0000;
}
.クッキー終了{
  位置:絶対;
  左:2px;
  上:2px;
  下:2px;
  幅:50%;
  背景:rgba(230,230,230,0.9);
  境界線の半径:3px;
}
入力:チェック済み + .toggle-finish{
  背景:#66CC33;  
}
入力:チェック済み + .toggle-finish .cookie-finish{ 
  左：自動;
  右:2px;
}