CSS辞書
UIレシピ集に戻る

数量ステッパー(−/+)

ボタン・操作対応が限定的

ECのカートで使う数量選択UI。number入力の標準スピナーを消して−/+ボタンを自作し、最小・最大値でクランプします。

プレビュー

Live

プレビュー枠は右下をドラッグすると高さを変えられます

コードを編集して試す

書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。

HTML
CSS
JS

仕組みの解説

実体は input type="number" なので、キーボードの上下キーや直接入力はそのまま使えます。ブラウザ標準のスピナーは appearance で消し、大きくタップしやすい−/+ボタンを自作します。JSはmin/max属性の範囲に収める加算だけで、値の検証ロジックをHTML属性に寄せているのがポイントです。

実装のポイント

合計金額の表示がある場合は、その要素にaria-liveを付けると数量変更が支援技術にも伝わります。

AIに依頼するときの文例

ECカート用の数量ステッパーを作ってください。input type="number"の標準スピナーをappearanceで消し、−/+ボタン(aria-label付き)で増減、min/max属性の範囲でクランプしてください。

使っているプロパティ