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

ON/OFF文字入りトグルスタイルスライダー

横長のトラックにON/OFFの文字を焼き込み、つまみの位置で状態を示す静止スライダーです。設定画面のスイッチ項目を大きく見せたい場合のデザイン見本に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-12-12-wrap">
          <span class="d04-12-12-label">自動更新</span>
          <div class="d04-12-12-toggle">
            <span class="d04-12-12-off">OFF</span>
            <span class="d04-12-12-on">ON</span>
            <div class="d04-12-12-thumb"></div>
          </div>
        </div>

CSS

.d04-12-12{align-items:center;justify-content:center}
        .d04-12-12-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d04-12-12-label{font-size:12px;color:#6b7280;font-weight:600}
        .d04-12-12-toggle{position:relative;width:110px;height:40px;border-radius:20px;background:linear-gradient(90deg,#c7d2fe,#6366f1);overflow:hidden}
        .d04-12-12-off{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:800;color:#4338ca}
        .d04-12-12-on{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:800;color:#fff}
        .d04-12-12-thumb{position:absolute;right:4px;top:4px;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}

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