ECのカートで使う数量選択UI。number入力の標準スピナーを消して−/+ボタンを自作し、最小・最大値でクランプします。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
実体は input type="number" なので、キーボードの上下キーや直接入力はそのまま使えます。ブラウザ標準のスピナーは appearance で消し、大きくタップしやすい−/+ボタンを自作します。JSはmin/max属性の範囲に収める加算だけで、値の検証ロジックをHTML属性に寄せているのがポイントです。
合計金額の表示がある場合は、その要素にaria-liveを付けると数量変更が支援技術にも伝わります。
ECカート用の数量ステッパーを作ってください。input type="number"の標準スピナーをappearanceで消し、−/+ボタン(aria-label付き)で増減、min/max属性の範囲でクランプしてください。