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

カラーバリエーション付きトグル

ON状態の配色を複数並べた見本です。カテゴリごとに色分けしたい設定項目に活用できます。

staticcss

プレビュー

ソースコード

HTML

<span class="d04-08-05-sw d04-08-05-blue"><span class="d04-08-05-knob"></span></span>
        <span class="d04-08-05-sw d04-08-05-purple"><span class="d04-08-05-knob"></span></span>
        <span class="d04-08-05-sw d04-08-05-orange"><span class="d04-08-05-knob"></span></span>
        <span class="d04-08-05-sw d04-08-05-pink"><span class="d04-08-05-knob"></span></span>

CSS

.d04-08-05{gap:10px;flex-wrap:wrap}
        .d04-08-05-sw{position:relative;width:46px;height:24px;border-radius:12px;display:inline-block}
        .d04-08-05-knob{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:#fff}
        .d04-08-05-blue{background:#3b82f6}
        .d04-08-05-purple{background:#8b5cf6}
        .d04-08-05-orange{background:#f97316}
        .d04-08-05-pink{background:#ec4899}

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