CSSだけでiOSのON/OFFスイッチを再現する

前置き

null

CSSだけでiOSのON/OFFスイッチを再現する

iOSのON/OFFスイッチをHTMLとCSSだけで再現します。 HTMLも使ってるけどタイトル長くなるから

See the Pen iOS Slider Button by kelp of truth (@kelp-of-truth) on CodePen.

<input type="checkbox" class="switch">

classはswitchです(わかりやすい)

input[type="checkbox"].switch{
  position: relative;
  appearance: none;
  background-color: #f2f2f2;
  -webkit-appearance: none;
  width: 44px;
  height: 28px;
  border: 2px solid #bababa;
  border-radius: calc(infinity * 1px);
  transition: 250ms ease-out;
  vertical-align: bottom;
  outline: 2px solid transparent;
}
input[type="checkbox"].switch:focus-visible{
  outline-color: #0043fc;
}
input[type="checkbox"].switch::after{
  content:"";
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  box-shadow: 0px 0px 3px #6b6b6b;
  width: 24px;
  height: 24px;
  border-radius: calc(infinity * 1px);
  transition: 200ms ease-out;
}
input[type="checkbox"].switch:active::after{
  background-color: #f2f2f2;
}
input[type="checkbox"].switch:checked{
  background-color: #00db07;
  border-color: #00db07;
}
input[type="checkbox"].switch:checked::after{
  left: 16px;
}

本体

チェックボックスの見た目をCSSで変更します。

まずappearance: none;でブラウザ規定の表示を無効化しておきます。
角を丸くして、横幅、縦幅を調整します。あとは疑似要素のafterを使い、つまみ(?)の部分を再現します。
そして、:checkをつかいチェックボックスがチェック時に別のCSSを適用するようにします。

おまけ

チェックボックス本体のpositionはrelativeにしておき、擬似要素のpositionをabsoluteにします(いつもの)。
チェックボックスにチェックが入っていない時はleftを0pxにしておきます。チェックが入った時にleftを16px(calc(100% - {擬似要素の横幅}))にします。transitionを指定しておけばアニメーションされます。
背景色は少し黒い白から黄緑色に代わり、ボーダーも灰色から背景と同じ黄緑色に変わります。