Live Demo
入力欄にホバーまたはフォーカスし、1〜9の範囲で数値を変更してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1072"><label for="tbx-1072-count">ご注文の数量</label><div class="tbx-1072__row"><span class="tbx-1072__thumb" aria-hidden="true">◈</span><div><b>ノートブック</b><small>1〜9点まで選択</small></div><input id="tbx-1072-count" type="number" min="1" max="9" step="1" value="1" aria-label="購入数量"></div><p>マウス・Tabで入力欄を強調できます。</p></div>
CSS
.tbx-1072{width:min(295px,100%);font:11px/1.4 system-ui,sans-serif;color:#304e5d}.tbx-1072>label{display:block;font-size:11px;font-weight:800;margin-bottom:10px}.tbx-1072__row{display:flex;align-items:center;gap:10px;padding:15px 12px;border:1px solid #d6e1e8;border-radius:9px;background:#fff;transition:border-color .25s,box-shadow .25s}.tbx-1072__thumb{width:45px;height:45px;flex:0 0 45px;border-radius:8px;background:#e4ede6;color:#699588;display:grid;place-items:center;font-size:25px;transition:transform .25s}.tbx-1072__row>div{display:grid;gap:6px;flex:1;min-width:0}.tbx-1072__row b{font-size:11px}.tbx-1072__row small{font-size:9px;color:#8295a0}.tbx-1072 input{width:57px;min-width:0;padding:8px 3px 8px 8px;text-align:center;background:#f8fbfb;border:1px solid #bfcfd4;color:#2f5668;font-size:13px;font-weight:800;border-radius:6px}.tbx-1072__row:is(:hover,:focus-within){border-color:#5eaaa2;box-shadow:0 0 0 3px #76bcad21}.tbx-1072__row:is(:hover,:focus-within) .tbx-1072__thumb{transform:rotate(8deg)}.tbx-1072 input:focus-visible{outline:3px solid #d4aa77;outline-offset:2px}.tbx-1072 p{font-size:9px;color:#8196a0;margin:11px 0 0}
@media(prefers-reduced-motion:reduce){.tbx-1072__row,.tbx-1072__thumb{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
EC / Product Detail
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末向けにフォーカス・選択・開閉の操作を用意。ホバー専用の追加説明は常時読めるよう配慮します。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。CSS :has()を使用する素材では対応ブラウザを確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。