CSSで作るToggle Switchを学んだのでさっそく作ってみた

備忘録です。

Toggle Switch（Toggle Button とも呼ばれているみたいです。）がCSSで作れると知って、へぇ〜っとなったのでいつものように勉強がてら作りました。

周りの人たちに、結構知らないこと多いよねとよく言われます。
....勉強します(´･_･`)

この話の流れとしては
Toggle Switch ってCSSで作るとこうなんだって！という話と
作り方を知ったので何か作ってみたよ！ という話を最後にちろっと書いています。

Toggle Switch

こんなの。よく見かけますね。これです。

See the Pen jQxYVx by Deren (@deren2525) on CodePen.

CSS で Toggle Switch

先ほど見せた Toggle Switch の正体はチェックボックスです。
チェックボックスとそれに紐づくラベル + ＠ のスタイルをちょちょいといじってあげるとさっきみたいな Toggle Switch ができます。
仕組みをはじめて知ったとき少しテンションが上がりました。おもしろい。

See the Pen Lo estoy usando en mi blog. Parte 2 by Deren (@deren2525) on CodePen.

詳細

順に説明します。

① ボタンの背景は Ckeckboxの<label>
ボタンの背景は Ckeckboxの<label>です。なので<label>にスタイルを当てています。チェックボックスにチェックが入ったら背景を緑にするといった仕組みです。

style.scss

label {
  width: 75px;
  height: 42px;
  background: #ccc;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
  box-sizing: border-box;
}

input:checked {
  +label{
    background-color: #4BD865;
  }
}

②Toggle Switch の左右に動く 「 ○ 」
Toggle Switch の左右に動く 「 ○ 」 は今回 label の 疑似要素after を利用して作っています。
チェックボックスにチェックが入ったら右に 「 ○ 」 が移動するようスタイルを書いていきます。

style.scss

label {
  &:after { // ○ のスタイル
    content: '';
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.4s;
    cursor: pointer;
  }
}

input:checked {
  +label{
    &:after{
      left: 40px;
    }
  }
}

ちなみに擬似要素じゃなくて、spanタグを使っても、入れ子のルールとしては問題ないので、「 ○ 」 をspanタグで使用してもOKです。

main.html

<div class="toggle-switch">
  <input id="toggle" type='checkbox' />
  <label for="toggle"/>
    <span></span> <!-- spanでもいいよ -->
</div> 

③<input>どこいった？
スタイルが当たっている Toggle Switch を見てもらったらわかると思うのですが、<input>が見えていないです。あの子は見えなくてよいのです。見えない所に隠してあげましょう。opacityでもz-indexでも見えなくなればなんでもいいです。
ただし、display: none;にしちゃうとcursor: pointer;とか効かなくなっちゃうので、それはやめたほうが良いです。
下のコードではopacityで隠しています。

【2019/12/30 追記】
cursor: pointer; は <label> につければよくて <input> は display: none; だけでよかったです。
display: none; してもラジオボタンって効くんですね！どこで勘違いしちゃったんだろう
@m0nch1 さんアドバイスありがとうございました！

style.scss

input {
    display: none;
}

ということで

Toggle Switch の作り方を知ったのでCSSで何か作ってみました。
CodePenの今週のチャレンジテーマが「トラ」だったのでモデルはトラです。
ボタンの切り替えでトラが起きたり寝たりします。
input:checked が大活躍しています。

See the Pen CodePen Challenge : CSS Tiger Toggle Buttons by Deren (@deren2525) on CodePen.

まとめ

Toggle Switch 楽しい