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

三段階トグル(セグメント3択・静止)

OFF・自動・ONの3状態を横並びのセグメントで表す静止見本です。動作モードの選択項目に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-08-07-seg">
          <span class="d04-08-07-opt">OFF</span>
          <span class="d04-08-07-opt d04-08-07-active">自動</span>
          <span class="d04-08-07-opt">ON</span>
        </div>

CSS

.d04-08-07-seg{display:flex;background:#f3f4f6;border-radius:8px;padding:3px;width:180px}
        .d04-08-07-opt{flex:1;text-align:center;font-size:12px;font-weight:600;color:#6b7280;padding:6px 0;border-radius:6px}
        .d04-08-07-active{background:#fff;color:#111827;box-shadow:0 1px 3px rgba(0,0,0,.15)}

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