こんにちわ。

作成中のWebページでトグルスイッチを実装しようと調べていた所...
いずれの解説サイト様も参考にはなったのですが、親要素やセレクタが複雑な構造をしていて、素人には難解でした。

と言う事で、勉強も兼ねて、自力で出来るだけシンプルにトグルスイッチを実装してみようと思います。

書いてみる

HTML

Main

<input type="checkbox" id="mycheck"/>
<label class="check" for="mycheck"><div></div></label>

たったこれだけ。
<div>や<label>で囲う必要は一切ありません。
<label>をfor="id"無しで囲うのは精神衛生的に良くないですからね...

CSS

Checkbox本体を隠す

input[type="checkbox"] {
    display: none;
}

どうぞ隠れて下さい。

基本設定

input[type="checkbox"] + label.check {
    position: relative;
    cursor: pointer;
    display: inline-block;
    width: 60px;
    height: 28px;
    color: #969696;
    border: 1px solid #a3a3a3;
    border-radius: 3px;
    background-color: #ffffff;
}

ポイントはposition:relativeで、この要素を基準として子要素の位置が調整出来るようになります。
width/heightを変更すると、トグルスイッチの大きさを調整出来ます。

チェック時の基本設定

input[type="checkbox"]:checked + label.check {
    border: 1px solid #4db4e4;
    background-color: #4db4e4;
}

チェック時は枠線もON色にする事でイマドキさがUP(?)

擬似要素(OFF文字)

input[type="checkbox"] + label.check::before {
    content: "OFF";
    position: absolute;
    top: 4px;
    left: auto;
    right: 6px;
}

チェック時の擬似要素(ON文字)

input[type="checkbox"]:checked + label.check::before {
    content: "ON";
    position: absolute;
    left: 6px;
    right: auto;
    color: #ffffff;
}

::before/::afterは独立した要素として機能します。
なのでlabel::beforeをposition:absoluteにしても、label自体には影響ありません。
結果、label基準で文字位置だけを自由に調整出来ます。

トグル部品

input[type="checkbox"] + label.check > div {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 22px;
    border: 1px solid #a3a3a3;
    border-radius: 3px;
    background-color: #ffffff;
    transition: 0.2s;
}

チェック時のトグル部品

input[type="checkbox"]:checked + label.check > div {
    border: 1px solid transparent;
    left: 44px;
}

これもposition:absoluteとする事により、label基準で位置調整が可能になります。
width/heightは、可動部の大きさになります。
leftを非チェック時とチェック時で別々にする事で、移動させています。
transitionで遷移時間を遅延させる事により、スライド感が増します。
しかし、あまり遅延させすぎるとUXが損なわれかねないので程々に。

px単位でサイズ決め打ちなので、長さや大きさを変更する時は、移動距離や余白調整に多少のカットアンドトライが発生してしまいますが、まぁトグルスイッチなんて1個作ってしまえば使い回せるので大丈夫でしょう(適当)

完成

イマドキっぽいオシャレなトグルスイッチが出来上がりました!

おわりに

CSSは記述多めでしたが、1個ずつ見ていけば、意外と大した事はありませんでした。
かなりシンプルに仕上られたと思います。

Checkboxのトグルスイッチをシンプルに書く

書いてみる

HTML

CSS

完成

おわりに