Live Demo
マウスを重ねると操作対象が強調されます。クリックでON/OFFが切り替わります。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<label class="tbx-1042"><span class="tbx-1042__text"><b>お知らせを受け取る</b><small>更新情報を通知</small></span><input type="checkbox" checked aria-label="更新情報を通知"><span class="tbx-1042__track" aria-hidden="true"><span class="tbx-1042__knob"></span></span></label>
CSS
.tbx-1042{display:flex;align-items:center;gap:12px;justify-content:space-between;width:min(277px,100%);padding:17px 14px;border:1px solid #d6e1ea;border-radius:10px;background:white;cursor:pointer;position:relative;font-family:system-ui;transition:background .2s,border .2s}
.tbx-1042__text{display:grid;gap:4px}.tbx-1042__text b{font-size:12px;color:#243d52}.tbx-1042__text small{font-size:10px;color:#7a8d9c}
.tbx-1042 input{position:absolute;opacity:0;width:1px;height:1px}.tbx-1042__track{width:44px;height:26px;border-radius:99px;background:#bfc9d3;padding:3px;flex:none;transition:background .24s,box-shadow .24s}
.tbx-1042__knob{display:block;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 1px 4px #0a233032;transition:transform .24s}
.tbx-1042 input:checked+.tbx-1042__track{background:#2c806e}.tbx-1042 input:checked+.tbx-1042__track .tbx-1042__knob{transform:translateX(18px)}
.tbx-1042:hover{background:#f2faf7;border-color:#9cc5bb}.tbx-1042:hover .tbx-1042__track{box-shadow:0 0 0 5px #4a98801a}
.tbx-1042:focus-within{outline:2px solid #cc8d56;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.tbx-1042,.tbx-1042__track,.tbx-1042__knob{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
会員ページの通知設定・表示設定
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末でも情報が欠落しない設計を基本とします。クリックで操作するサンプルはタップで確認できます。
Browser：最新のChrome・Firefox・Safari・Edge向けCSS。:has()を利用する素材は最新ブラウザを想定しています。
Reduced Motion：prefers-reduced-motion: reduceに対応。