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

ラベル内蔵型トグル

スイッチ内部にON/OFFの文字を表示する形状です。状態が一目で分かるため設定一覧に向きます。

staticcss

プレビュー

ソースコード

HTML

<span class="d04-08-03-sw d04-08-03-on">ON</span>
        <span class="d04-08-03-sw d04-08-03-off">OFF</span>

CSS

.d04-08-03{gap:14px}
        .d04-08-03-sw{display:inline-flex;align-items:center;width:70px;height:30px;border-radius:15px;font-size:12px;font-weight:700;color:#fff}
        .d04-08-03-on{background:#16a34a;justify-content:flex-start;padding-left:12px}
        .d04-08-03-off{background:#9ca3af;justify-content:flex-end;padding-right:12px}

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