パーツ番号 04-07-03 ・ CSSのみ

トグルスイッチ型チェックボックス(OFF/ON静止表示)

OFFとONの2状態を並べて表示するスイッチ風チェックボックス。設定画面のON/OFF項目デザインに応用できる。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-07-03-row">
          <span class="d04-07-03-switch">
            <span class="d04-07-03-knob"></span>
          </span>
          <span class="d04-07-03-switch on">
            <span class="d04-07-03-knob"></span>
          </span>
        </div>

CSS

.d04-07-03-row{display:flex;gap:24px;align-items:center}
        .d04-07-03-switch{width:58px;height:30px;border-radius:15px;background:#cbd5e1;position:relative;display:inline-block}
        .d04-07-03-switch.on{background:#f97316}
        .d04-07-03-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
        .d04-07-03-switch.on .d04-07-03-knob{left:31px}

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