数値入力フィールドのスピンボタンを非表示にする方法

問題

type="number"の入力フィールドには、デフォルトでインクリメント/デクリメントボタン（スピンボタン）が表示されます。これらのボタンを非表示にし、クリーンな入力インターフェースを実現する方法について解説します。

<input type="number" placeholder="電話番号" class="border p-4 outline-none">

解決策

推奨方法: inputmode="numeric"の使用

最もシンプルで互換性の高い解決策は、type="number"の代わりにinputmode="numeric"を使用することです。

<input type="text" inputmode="numeric" class="border-2">

メリット

• スピンボタンが表示されない
• キーボード入力が数値専用になる
• すべてのモダンブラウザでサポート（2021年12月以降）
• デフォルトのブラウザスタイルに依存しない一貫した表示

CSSを使用した方法

既存のtype="number"入力フィールドのスピンボタンを非表示にする場合、ブラウザごとに異なるアプローチが必要です。

グローバルなスタイル設定

@layer base {
  input[type="number"] {
    /* Firefox用 */
    appearance: textfield;
    
    /* Chrome, Edge, Safari用 */
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      appearance: none;
    }
  }
}

個別のクラスでの適用

特定のフィールドのみに適用したい場合は、カスタムユーティリティクラスを作成します。

@utility hide-spin-button {
  appearance: textfield;
  
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    appearance: none;
  }
}

<input type="number" class="hide-spin-button border-2">

インラインスタイル（Tailwind CSS）

Tailwind CSSのバニラ記法を使用したインラインでの解決策：

<input
  type="number"
  class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none border-2"
/>

インラインスタイル

<input
  type="number"
  class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none border-2"
/>

グローバルスタイル

@layer base {
  input[type="number"] {
    appearance: textfield;
    
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      appearance: none;
    }
  }
}

ブラウザ対応状況

inputmode="numeric"

• ✅ Chrome 66+ (2018年4月)
• ✅ Firefox 95+ (2021年12月)
• ✅ Safari 12.1+ (2019年3月)
• ✅ Edge 79+ (2020年1月)

標準のappearanceプロパティ

Tailwind CSS v4では、2023年のベースラインに合わせて標準のappearanceプロパティが使用できます。

注意点

• appearance: noneを使用すると、他のデフォルトスタイルもリセットされる可能性があります
• 古いブラウザでは、ベンダープレフィックス（-webkit-, -moz-）が必要な場合があります
• スピンボタンを非表示にしても、数値の検証機能は保持されます

まとめ

新しいプロジェクトではinputmode="numeric"の使用を推奨します。既存のtype="number"入力フィールドを維持する必要がある場合は、CSSを使用してスピンボタンを非表示にすることができます。Tailwind CSS v4では、標準のCSSプロパティを使用したクロスブラウザ対応が可能です。