input type="number"の右のボタンがspin buttonということを知りました。
そしてwebkit限定ですが、CSSである程度カスタムできることを知ったので、早速カスタムしてみました。
本当のスピンボタンは透明にしつつ、大きくしておいて、その上に当たり判定のないダミーのボタンを置くという方針を取っています。
DEMO
See the Pen
input type="number" custom spin button for webkit by kimmy (@kimmy)
on CodePen.
SCSS
body { background: #ECEFF1; } .input-box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 600px; width: 100%; height: 60px; &:before { position: absolute; top: 8px; right: 20px; color: #ECEFF1; font-size: 20px; content: "▲"; pointer-events: none; // 当たり判定をなくす } &:after { position: absolute; bottom: 8px; right: 20px; color: #ECEFF1; font-size: 20px; content: "▼"; pointer-events: none; // 当たり判定をなくす } .input { box-sizing: border-box; display: block; margin: 0 auto 40px; border: none; border-radius: 10px; padding: 20px 60px 20px 20px; width: 100%; height: 60px; font: 20px "Avenir Next"; box-shadow: 0 0 2px rgba(0, 0, 0, .5) inset; -webkit-appearance: none; &:focus { outline: none; } &::-webkit-inner-spin-button { position: absolute; top: 0; bottom: 0; right: 0; // 右端に固定 margin: auto; transform: scale(5); // 当たり判定を大きくする transform-origin: right center; opacity: 0; // 透明にして見えなくする } &::-webkit-contacts-auto-fill-button { opacity: 0; // Safariのオートフィルボタンを透明にして見えなくする } } }