パーツ番号 04-02-04 ・ CSSのみ

トグルスイッチ

ON/OFFでノブが滑らかに移動し背景色が変わるスイッチ。WordPressの設定画面風UIや、メルマガ購読の選択などに使えます。

cssinput

プレビュー

ソースコード

HTML

<label class="d04-02-04-toggle">
          <input type="checkbox">
          <span class="d04-02-04-track"><span class="d04-02-04-knob"></span></span>
          <span class="d04-02-04-label">通知を受け取る</span>
        </label>

CSS

.d04-02-04-toggle{display:flex;align-items:center;gap:14px;cursor:pointer;user-select:none}
        .d04-02-04-toggle input{position:absolute;opacity:0;width:0;height:0}
        .d04-02-04-track{
          width:56px;height:30px;border-radius:15px;background:#c3c9d4;
          position:relative;flex:0 0 auto;transition:background .3s;
        }
        .d04-02-04-knob{
          position:absolute;top:3px;left:3px;width:24px;height:24px;
          border-radius:50%;background:#fff;
          box-shadow:0 2px 5px rgba(0,0,0,.25);
          transition:left .3s cubic-bezier(.4,0,.2,1);
        }
        .d04-02-04-toggle input:checked + .d04-02-04-track{background:#4a6cf7}
        .d04-02-04-toggle input:checked + .d04-02-04-track .d04-02-04-knob{left:29px}
        .d04-02-04-toggle input:focus-visible + .d04-02-04-track{outline:2px solid #4a6cf7;outline-offset:2px}
        .d04-02-04-label{font-size:15px;color:#333}

クラス名 .d04-02-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。