パーツ番号 10-07-11 ・ CSSのみ

予約リマインダー通知設定UI

「3日前」「1日前」「1時間前」などの通知タイミングをトグルスイッチで個別にON/OFFできる設定画面です。予約確認メールの事前通知設定に使えます。

css

プレビュー

ソースコード

HTML

<div class="d10-07-11-wrap">
          <p class="d10-07-11-title">リマインダー通知</p>
          <div class="d10-07-11-row">
            <span>3日前にメール</span>
            <label class="d10-07-11-switch"><input type="checkbox" checked><span class="d10-07-11-slider"></span></label>
          </div>
          <div class="d10-07-11-row">
            <span>1日前にメール</span>
            <label class="d10-07-11-switch"><input type="checkbox" checked><span class="d10-07-11-slider"></span></label>
          </div>
          <div class="d10-07-11-row">
            <span>1時間前にSMS</span>
            <label class="d10-07-11-switch"><input type="checkbox"><span class="d10-07-11-slider"></span></label>
          </div>
        </div>

CSS

.d10-07-11-wrap{width:100%;max-width:250px;}
        .d10-07-11-title{font-size:12px;font-weight:600;color:#444;margin:0 0 10px;}
        .d10-07-11-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f0f0f0;font-size:12px;color:#374151;}
        .d10-07-11-row:last-child{border-bottom:none;}
        .d10-07-11-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;}
        .d10-07-11-switch input{position:absolute;opacity:0;width:1px;height:1px;}
        .d10-07-11-slider{position:absolute;inset:0;background:#e2e8f0;border-radius:999px;transition:background .25s ease;cursor:pointer;}
        .d10-07-11-slider::before{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s ease;}
        .d10-07-11-switch input:checked + .d10-07-11-slider{background:#2f6fed;}
        .d10-07-11-switch input:checked + .d10-07-11-slider::before{transform:translateX(16px);}

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