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

標準iOS風トグルスイッチ

丸ノブが左右どちらかに寄った定番形状のスイッチです。WordPressの設定画面でON/OFF項目の表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-08-01-row">
          <span class="d04-08-01-sw d04-08-01-on"><span class="d04-08-01-knob"></span></span>
          <span class="d04-08-01-label">ON</span>
        </div>
        <div class="d04-08-01-row">
          <span class="d04-08-01-sw d04-08-01-off"><span class="d04-08-01-knob"></span></span>
          <span class="d04-08-01-label">OFF</span>
        </div>

CSS

.d04-08-01{flex-direction:column;gap:16px}
        .d04-08-01-row{display:flex;align-items:center;gap:12px}
        .d04-08-01-sw{position:relative;width:52px;height:28px;border-radius:14px;display:block}
        .d04-08-01-on{background:#22c55e}
        .d04-08-01-off{background:#d1d5db}
        .d04-08-01-knob{position:absolute;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
        .d04-08-01-on .d04-08-01-knob{right:3px}
        .d04-08-01-off .d04-08-01-knob{left:3px}
        .d04-08-01-label{font-size:13px;color:#374151;font-weight:600}

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