Live Demo
対象要素をマウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1288"><label for="tbx-1288-range">Intensity <span>ADJUST</span></label><input id="tbx-1288-range" type="range" min="0" max="100" value="50" aria-label="Intensity（強度）"/><span class="tbx-1288__help">Drag to adjust</span></div>
CSS
.tbx-1288{box-sizing:border-box;position:relative;width:290px;max-width:100%;padding:21px 20px;border:1px solid #ded9ee;border-radius:14px;background:#f9f8fc;font:13px/1.5 system-ui,sans-serif;color:#3d3159;transition:box-shadow .4s,border-color .4s}
.tbx-1288 label{display:flex;justify-content:space-between;gap:10px;font-weight:700;letter-spacing:.02em}.tbx-1288 label span{color:#7453ae;font-size:10px;letter-spacing:.09em}
.tbx-1288 input{display:block;width:100%;margin:17px 0 8px;accent-color:#8667c5;cursor:pointer}.tbx-1288__help{display:block;text-align:center;font-size:11px;color:#8c82a8;transition:color .3s,letter-spacing .3s}
.tbx-1288:hover,.tbx-1288:focus-within{border-color:#a18ac7;box-shadow:0 0 0 5px #aa90de32,0 10px 30px #9f8bc524}
.tbx-1288:hover .tbx-1288__help,.tbx-1288:focus-within .tbx-1288__help{color:#6744a0;letter-spacing:.06em}
.tbx-1288 input:focus-visible{outline:3px solid #9479d1;outline-offset:6px}
@media(prefers-reduced-motion:reduce){.tbx-1288,.tbx-1288__help{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Form / Configurator
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバーと同じ結果にならないため、タップ・フォーカス時の動作も確認してください。
Browser：現行Chrome / Firefox / Edge / SafariのCSS機能を利用します。
Reduced Motion：prefers-reduced-motion: reduce でアニメーションを停止します。