ミギムキ

[CSS] オン/オフスイッチをiOSのスライドトグル風にスタイルしたい

CSSでスタイルしたオン/オフスイッチ

動作イメージ

サンプルコード

html

<div class="toggle_switch"> <input type="checkbox" name="xxx" id="cb_toggle_switch"> <label for="cb_toggle_switch"></label> </div>

CSS

.toggle_switch { display: table; font-size: 60px; } .toggle_switch > input { display: none; } .toggle_switch > label { display: block; position: relative; width: 1.8em; height: 1em; border-radius: 1em; background-color: #2b2a2f; cursor: pointer; } .toggle_switch > input:checked + label { background-color: #2dcb45; } .toggle_switch > label::before { position: absolute; top: 0.05em; left: 0.05em; width: calc(1em - 0.1em); height: calc(1em - 0.1em); border-radius: calc(1em - 0.1em); background-color: #fff; transition: 0.5s; content: ""; } .toggle_switch > input:checked + label::before { left: calc(100% - 1em + 0.05em); }
  • スイッチのサイズを変えたいときは「toggle_switch」クラスの「font-size」を変更してください

サンプルコードの解説

<div class="toggle_switch"> <input type="checkbox" name="xxx" id="cb_toggle_switch"> <label for="cb_toggle_switch"></label> </div> .toggle_switch > label { display: block; position: relative; width: 1.8em; height: 1em; border-radius: 1em; background-color: #2b2a2f; cursor: pointer; } .toggle_switch > input:checked + label { background-color: #2dcb45; } .toggle_switch > label::before { position: absolute; top: 0.05em; left: 0.05em; width: calc(1em - 0.1em); height: calc(1em - 0.1em); border-radius: calc(1em - 0.1em); background-color: #fff; transition: 0.5s; content: ""; } .toggle_switch > input:checked + label::before { left: calc(100% - 1em + 0.05em); }

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。