【CSS】ON/OFFのスイッチをフォームで作ってみる

最近のホームページ制作ではフォームの使い道が色々増えたと思います。
例えば上の画像のような、スイッチのようなチェック項目を使用する機会も結構増えました。
こういうスイッチのようなフォームは、CSSだけで作成してしまえば使いまわしたりする事も簡単になります。
と、言うわけで早速作ってみたいと思います。

スイッチが動く仕組み

スイッチ部分をCSSで動かす場合どの様に動かせば良いのでしょうか？
フォームの中でスイッチと用途が似ているのはラジオボタンとチェックボックスになります。

チェックボックスやラジオボタンはラベルを使用することで、チェックボックスやラジオボタン自体を押さなくてもボタンを押す事ができます。この仕組を利用してチェックボックス等を書き換えてあげることで好きな形のボタンを作成することが出来るようになります。
さらにもう一つ、チェックボックス等は「:checked」と言う擬似クラスを使うことが可能です。この疑似クラスはその名の通り押されている時に適用されるCSSと言う事になります。
この2つを使うことで、手軽にスイッチを作成することが可能です。
と、言うわけで今回はチェックボックスを使ってスイッチを作成してみようと思います。

HTML

<div class="form-switch">
  <label for="switchsample" class="form-switch-items">
    <input type="checkbox" name="switchsample" id="switchsample" class="form-switch-tab" checked="">
    <div class="icon"></div>
    <span>スイッチのテキスト</span>
  </label>
</div>

CSS

/* フォームのスイッチ */
.form-switch label {
  cursor: pointer;
  user-select: none;
}

.form-switch input[type="checkbox"] {
  display: none;
}

.form-switch-items {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
}

.form-switch-items .icon {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  line-height: 1;
  height: 24px;
  transition: all 0.25s;
  border: 2px solid #ccc;
  border-radius: 30px;
  transition: all 0.5s;
}

.form-switch-items .icon::before {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  border-radius: 50%;
  background: #ccc;
  transition: all 0.5s;
}

.form-switch-tab:checked + .icon {
  border-color: #666;
}

.form-switch-tab:checked + .icon::before {
  background: #666;
  transform: translateX(100%);
}

動作の説明

HTMLは普通のチェックボックスが入っていますが、<div class="icon"></div>と言う空のタグが混ざっています。
これは今回のスイッチのアイコンを表示するためのタグになります。
まずはチェックボックス本体をdisplay:noneで消します。チェックボックス本体を消していても、ON、OFFの判定は残ります。
また、該当部分のマウスカーソルをポインターにするCSS、ラジオスイッチのテキストを選択できないようにするCSSもセットしておきます。

アイコン部分のdivでスイッチの外枠を作ります。
その中に入れる丸はdivのbefore擬似クラスで作成します。これで余計なタグを付け加えずに2種類のオブジェクトを配置することができます。
外側のdivは2:1の長方形、そして中の円は1:1の正方形になるように配置します。サイズの数値は比率さえ合っていれば自由に設定できます。

これで、丸が左側に置かれたアイコンができたと思います。
これをOFF状態の場合、チェックを入れたら丸が右に動くようにします。
チェックを入れたかどうかは先程説明した「:checked」擬似クラスを使用します。

checked擬似クラスは、inputタグ本体にしか使えないのでinputタグがチェックした次の要素の.iconタグに変化する内容を設定していきます。
CSSを＋で連結すると、その要素の直後にこの要素があった時に適用されると言う意味になります。そのために、消したinputタグは.iconの直前に配置しています。

これで設定は完了です。変化前と変化後をアニメーションさせたい場合は、transitionを設定することを忘れずに。また、変更する場所は.icon自体と、.icon::beforeの2箇所ありますので、それぞれにtransitionを設定してください。

このような感じで、スイッチのようなボタンを作成することができます。
このような感じのものが、CSSで簡単にできるようになるのは便利ですね。
これを元にすれば、色々な場面で使える様になると思います。

こんな感じで色々とデザインに関して頑張っておりますので、なにかホームページ制作でお困りのことが有りましたら、パタパタワークスにご相談ください！

それでは！