Chromeでinput type="number"をCSSでスタイリングする方法（スピナーの表示・非表示）

ChromeなどのWebKit系ブラウザでは、input type="number" の右側に表示されるスピナー（上下矢印ボタン）は、デフォルトのCSSでは直接スタイリングできません。そこで活用するのが、WebKit独自の疑似要素 ::-webkit-inner-spin-button です。

スピナーを非表示にする方法

数値入力フィールドからスピナーを完全に取り除きたい場合は、以下のように -webkit-appearance: none; を指定します。

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

このスタイルを適用すると、入力フィールドにはスピナーが表示されなくなります。デザインの統一感を持たせたい場合や、独自のカウンターUIを実装したい場合に便利です。

スピナーを表示してスタイリングする方法

逆に、通常は非表示になりがちなスピナーを常に表示させたい場合は、opacity プロパティを活用します。

input[type=number]::-webkit-inner-spin-button {
    opacity: 1;
}

opacity: 1; を指定することで、フォーカスしていない状態でもスピナーが常に表示されるようになります。さらにこの疑似要素に対して幅やマージンなどを追加することで、見た目を細かく調整することも可能です。

出力結果

上記のコードを実際にブラウザで実行すると、次のような表示結果が得られます。

補足：クロスブラウザ対応について

::-webkit-inner-spin-button はWebKit系ブラウザ（Chrome・Safari・Edgeなど）向けの手法です。Firefoxでスピナーを非表示にしたい場合は、-moz-appearance: textfield; を併せて指定するのが定番のテクニックです。主要ブラウザすべてで統一した見た目を実現するために、両方のベンダープレフィックス対応を行っておくことをおすすめします。