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

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

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

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

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

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

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

このページの目次

１．ここで必要なトグルスイッチの構造
２．トグルボタン用のCSSを追加する
３．実際に作ったトグルボタンの見た目と動作例
工夫次第でチェックボックスでもお洒落に改造できる

１．ここで必要なトグルスイッチの構造

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

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

<!-- チェックボックス -->
<input type="checkbox" />

1 2	<!-- チェックボックス --> <input type="checkbox" />

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

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

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

<div class="switch-wrap d-flex mb-2">
    <span class="me-auto">Switch one</span>
    <label class="switch">
        <input type="checkbox"
            class="warning">
        <span class="slider"></span>
    </label>
</div>

<span class="me-auto">Switch one</span>

<input type="checkbox"

class="warning">

</label>

</div>

※ 一部クラスにbootstrap使用

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

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

２．トグルボタン用のCSSを追加する

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

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

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

/* スイッチ本体 */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  /*height: 34px;*/
  height: 28px;
  float:right;
}
/* デフォルトのcheckbox隠す */
.switch input {display:none;}
/* トグルボタンのスライダー */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
/* スライダーのつまみ部分 */
.slider:before {
  position: absolute;
  content: "";
  /*height: 26px;*/
  height: 20px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
/* checkboxの状態ごとの背景色 */
input.default:checked + .slider {
  background-color: #444;
}
input.primary:checked + .slider {
  background-color: #2196F3;
}
input.success:checked + .slider {
  background-color: #8bc34a;
}
input.info:checked + .slider {
  background-color: #3de0f5;
}
input.warning:checked + .slider {
  background-color: #FFC107;
}
input.danger:checked + .slider {
  background-color: #f44336;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/* 丸っこいスライダーにも対応 */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

/* スイッチ本体 */

.switch {

position: relative;

display: inline-block;

width: 60px;

/*height: 34px;*/

height: 28px;

float:right;

}

/* デフォルトのcheckbox隠す */

.switch input {display:none;}

/* トグルボタンのスライダー */

.slider {

position: absolute;

cursor: pointer;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: #ccc;

-webkit-transition: .4s;

transition: .4s;

}

/* スライダーのつまみ部分 */

.slider:before {

position: absolute;

content: "";

/*height: 26px;*/

height: 20px;

width: 26px;

left: 4px;

bottom: 4px;

background-color: white;

-webkit-transition: .4s;

transition: .4s;

}

/* checkboxの状態ごとの背景色 */

input.default:checked + .slider {

background-color: #444;

}

input.primary:checked + .slider {

background-color: #2196F3;

}

input.success:checked + .slider {

background-color: #8bc34a;

}

input.info:checked + .slider {

background-color: #3de0f5;

}

input.warning:checked + .slider {

background-color: #FFC107;

}

input.danger:checked + .slider {

background-color: #f44336;

}

input:focus + .slider {

box-shadow: 0 0 1px #2196F3;

}

input:checked + .slider:before {

-webkit-transform: translateX(26px);

-ms-transform: translateX(26px);

transform: translateX(26px);

}

/* 丸っこいスライダーにも対応 */

.slider.round {

border-radius: 34px;

}

.slider.round:before {

border-radius: 50%;

}

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

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

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

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

PisukeCode - Web開発まとめ

CSSでチェックボックスがチェックされたら要素表示とかする方法

https://pisuke-code.com/css-show-elem-when-checked

チェックボックスがチェックされた時、要素をフェードイン表示したり、逆に要素を非表示にしたり、文字の色を変えたりとか・・・そういう動的な処理ってCSSだけでも十分できます。そこで自分の記憶の整理も兼ね、ここではチェックON・OFF時に要素を表示する方法を紹介！jQueryとかスクリプトを書かなくても、複雑な処理ができて便利です。チェック状態は :checked 疑似クラスを使うチェックボックスとかラジオボックスとか・・・チェック可能な要素の場合チェック状態の時だけCSSを適用できる便利な疑似クラスがあります。それ...

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

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

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

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

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

<div class="switch-wrap d-flex mb-2">
    <span class="me-auto">Switch normal</span>
    <label class="switch">
        <input type="checkbox"
            class="warning">
        <span class="slider"></span>
    </label>
</div>
<div class="switch-wrap d-flex">
    <span class="me-auto">Switch rounded</span>
    <label class="switch">
        <input type="checkbox"
            class="warning">
        <span class="slider round"></span>
    </label>
</div>