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

大型トグルスイッチ(設定項目リスト風)

項目名の右端に大きめのスイッチを並べたリスト形式です。管理画面の設定ページを想定しています。

staticcss

プレビュー

ソースコード

HTML

<ul class="d04-08-06-list">
          <li><span>通知を受け取る</span><span class="d04-08-06-sw d04-08-06-on"><i></i></span></li>
          <li><span>自動更新</span><span class="d04-08-06-sw d04-08-06-on"><i></i></span></li>
          <li><span>コメント承認制</span><span class="d04-08-06-sw d04-08-06-off"><i></i></span></li>
        </ul>

CSS

.d04-08-06{align-items:stretch}
        .d04-08-06-list{list-style:none;margin:0;padding:0;width:100%}
        .d04-08-06-list li{display:flex;align-items:center;justify-content:space-between;padding:9px 4px;border-bottom:1px solid #eee;font-size:13px;color:#374151}
        .d04-08-06-list li:last-child{border-bottom:none}
        .d04-08-06-sw{position:relative;width:44px;height:24px;border-radius:12px;display:inline-block}
        .d04-08-06-sw i{position:absolute;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;display:block}
        .d04-08-06-on{background:#22c55e}
        .d04-08-06-on i{right:2px}
        .d04-08-06-off{background:#d1d5db}
        .d04-08-06-off i{left:2px}

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