input[type=”number”]に表示される矢印(スピンボタン)をCSSで非表示にする方法

フォーム内で「<input type=”number”>」を使うと、デフォルトでは入力フォーム内に以下のような矢印(スピンボタン)が表示されます。矢印をクリックすることで数値を増減できます。

この矢印はあったらあったで便利だと思うのですが、デザインの都合上、非表示にしたい場合もあるかと思います。

単純にinput[type=”number”]にappearance:none;を追加すれば消えると思ったのですが、それではダメでした。

そんなわけで、今回はinput[type=”number”]に表示される矢印を消す方法をご紹介いたします。

input[type=”number”]に表示される矢印(スピンボタン)をCSSで非表示にする方法

CSSに下記を追加してあげることで、input[type=”number”]の矢印を消すことができます。

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

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

ChromeやSafariでは、::-webkit-outer-spin-buttonと::-webkit-inner-spin-buttonをセレクタに追加する必要があるんです。

Firefoxでは、-moz-appearance:textfield;によって、矢印を非表示にできます。

IEはというと、そもそも矢印が表示されていませんでした。

あとがき

input[type=”number”]の矢印を消したいのに、appearance:none;を指定しても消えない…という場合は、ぜひ参考にしていただければと思います。

それにしても、フォーム周りはブラウザ毎のデフォルトスタイルが多くて調整が大変ですね(^^;