【CSS】トグルボタンを作ってみる
トグルボタン
よく見かけるこのボタン。これをcssで実装してみました。
html
<input type="checkbox" name="hoge" class="input" value="1" checked=""> <label for="hoge" class="toggle"></label>
.toggle { width: 50px; height: 30px; background: #f5f5f5; // チェックしていない時の背景色 position: relative; display: inline-block; border-radius: 46px; transition: 0.4s; // チェックして背景色が変わるアニメーション box-sizing: border-box; border: 1.5px solid #E5E5EA; } .toggle:after { // 丸いボタン content: ""; position: absolute; width: 27px; height: 97%; border-radius: 100%; left: 0; top: 0; z-index: 2; background: #ffffffff; -webkit-box-shadow: 0 2px 6px #999; box-shadow: 0 2px 6px #999; transition: 0.4s; } .input:checked+.toggle:after { // ボタンの動き left: 20px; .input:checked+.toggle { // チェック後の背景色 background-color: #4169e1; }
inputがチェックされた時に、after要素を左から20px移動させることで、丸ボタンが動いたようにみせる仕組み。
参考
cssの:after
擬似要素。要素のようなものをhtmlではなく、cssで作成する。
.toggle:afterは、toggleクラスの要素の直後に擬似要素を作成する。
cssの+(プラス)
「+」は隣接セレクタ。その直後に出現する要素を表す。
input:checked+.toggle は、input要素でチェックされた直接にくるtoggleクラスを指す。
→今回の場合、チェックされたら背景色を変更
ちなみに、チェックしてない時にも指定のvalueを送信したい場合は、 をチェックボックスののinput前に置くことで可能。