Zenn
🪬

数値の入力欄に表示されるスピンボタンを非表示にする方法

に公開
CSS
tech

input タグの数値フィールドはデフォルトでスピンボタン（数値の増減ボタン）が付いています。
これを非表示にしたいと思ったのですが、 HTML にはそういった属性は無いようです。

対処方法

以下の CSS によって非表示にできました。

/* Chrome, Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* FireFox, IE */
input[type="number"] {
  -moz-appearance:textfield;
}

参考記事

https://www.hirooooo-lab.com/entry/development/html5-input-type-number-customize

Discussion