CSSだけでチェックボックスをトグルボタン化。作り方とコード例

こういうトグルボタンを作ってみました

▼ 作成に当たって重要な点

  • 電気のスイッチボタンみたいな形
  • ONの状態のときに点灯するイメージ
  • チェックボックスを改造して作りたい
  • CSSだけで余計なライブラリも不要

▼ 仕上がりはこういう感じ

チェックボックスから電気スイッチみたいな感じのトグルボタンの作り方を解説

普通のチェックボックスでは少し味気ない、
ON・OFFを分かりやすくてお洒落にしたい…

そういう人のために紹介します。

1.ここで必要なトグルスイッチの構造

普通のチェックボックスでは次のinputだけです

▼ 通常はこれだけの構造で十分

でもここで作りたいのはトグルボタン

構造がシンプルすぎるので少し工夫します

▼ ここで考えたのは次のような構造です

※ 一部クラスにbootstrap使用

ここでは見栄えのために me-auto とか d-flex みたいなBootstrapも使用してます。ですがトグルボタンを作りたいだけならBootstrapは必須ではありません

簡潔に言うと .switch  という要素でcheckboxを囲み、トグルスイッチのスライダー用に .slider  というクラスを持つ要素を付け加えました。

2.トグルボタン用のCSSを追加する

そしたら先ほどの構造にCSS適用します。

ここではこんなCSSを用意しました。

▼ 次のようなスタイルを適用

何をしているかは全て説明しません。

一見複雑そうなCSSに見えますが、やっていることは既存のチェックボックスを隠して代わりにスイッチボタンとして表示してるだけです

あと肝心なのは input.warning:checked のようなチェック状態を表す疑似要素を使ってることですね。これでチェック状態のinput要素あるいは子要素に任意のスタイルを適用できます

▼ :checked疑似要素はこんな場面でも使える

上記事でも書いたようにスクリプトも一切不要です。

こんな動的なことがCSSだけでできるのが素晴らしい

3.実際に作ったトグルボタンの見た目と動作例

それでは実際に見本を見せます。

▼ 普通と丸型トグルボタンの例

▼ こういう見た目になった

実際のトグルボタンの見た目。電気スイッチのようにON・OFFがアニメーション付きで可能。なおかつ丸型にも対応

▼ 実際に動かしてみたときのGif動画

実際にトグルボタンを動かしてるときの様子。オンにするとボタンが黄色くなり、オフにすると灰色になって切り替えが分かりやすい

なんかお洒落でサマになってませんか?

工夫次第でチェックボックスでもお洒落に改造できる

そこは個人のセンス次第ですね

僕はセンスがあまりないので、CodePenとかでお洒落なデザイン・コードを見つけたら真似してます。全てゼロから生み出すような天才になる必要はありませんね。

以上、CSSでトグルボタンを作ってみたでした。

ご指摘・疑問点はコメント欄から。ではまた(@^^)/~~~