[CSS] オン/オフスイッチをiOSのスライドトグル風にスタイルしたい
- 設定のオン/オフを切り替える要素として、iPhoneやiPadでおなじみのスライド形式のトグルボタンがあります
- 同じような見た目、挙動のボタンをinputタグとlabelタグ、CSSで作ることができます
- 各部品のサイズに「em」を使っているため、「font-size」を一箇所変更するだけでスイッチ全体のサイズ感を変えることができます
動作イメージ
サンプルコード
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>
- スイッチのオン/オフ状態はinputタグのチェックボックスで保持しますが、表示には使用しません
- labelタグで背景を、labelタグの::before要素でスライドさせる丸部分を描画します
.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;
}
- スイッチの背景を描画するlabelタグのスタイルです
- チェックボックスの「checked」でオン/オフ状態を判定し、背景色を切り替えます
.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);
}
- スライドする丸部分を描画するlabelタグのbefore要素のスタイルです
- 背景色と同様に、チェックボックスの「checked」でオン/オフ状態を判定し、丸部分の位置を切り替えます
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。