Firefox 29における入力数値の上下矢印ボタン非表示化（スピナー） - CSS解説

方法1：::-webkit-inner-spin-button, ::-webkit-outer-spin-button 擬似要素を使用する

この方法は、FirefoxおよびWebkitベースブラウザ専用となります。

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  /* 矢印ボタンの幅と高さを0に設定することで非表示化する */
  width: 0;
  height: 0;
}

方法2：moz-appearance プロパティを使用する

この方法は、Firefox専用となります。

input[type="number"] {
  -moz-appearance:textfield; /* 入力欄をテキストフィールドに変更 */
}

• 上記の方法は、入力値のインクリメント/デクリメント機能自体は保持されます。スピナー機能の完全な無効化には、JavaScriptによるイベントリスナーの無効化処理が必要となります。

注意事項

• 上記の情報は、執筆時点（2024年6月17日）におけるものであり、将来的に変更される可能性があります。
• CSSの記述には、シンタックスエラーがないように注意してください。
• 複雑なCSSを使用する場合は、ブラウザの開発者ツールを用いてデバッグすることを推奨します。

.hide-spinners input[type="number"]::-webkit-inner-spin-button,
.hide-spinners input[type="number"]::-webkit-outer-spin-button {
  width: 0;
  height: 0;
}

.hide-spinners input[type="number"] {
  -moz-appearance: textfield;
}

• 上記のコードは、.hide-spinners というCSSクラスを定義しています。このクラスを、スピナーボタンを非表示化したい入力要素に適用してください。
• コード中の /* ... */ は、コメントを表します。コメントは、コードの説明を記述するために使用されます。

例

<div class="hide-spinners">
  <input type="number" value="0">
  <input type="number" value="100">
</div>

上記のHTMLコードは、以下のCSSコードと組み合わせることで、入力要素のスピナーボタンを非表示化します。

.hide-spinners input[type="number"]::-webkit-inner-spin-button,
.hide-spinners input[type="number"]::-webkit-outer-spin-button {
  width: 0;
  height: 0;
}

この方法は、スピナーボタンの幅よりも狭い幅を設定することで、ボタンを画面からはみ出させて非表示化します。ただし、入力欄の幅が小さくなりすぎる可能性があることに注意が必要です。

input[type="number"] {
  width: 30px; /* 入力欄の幅を30pxに設定 */
}

方法4：JavaScriptを使用する

この方法は、JavaScriptを用いてスピナーボタンのイベントリスナーを無効化することで、スピナー機能を完全に無効化します。

const numberInputs = document.querySelectorAll('input[type="number"]');

numberInputs.forEach(input => {
  input.addEventListener('wheel', (event) => {
    event.preventDefault();
  });
});

方法の比較

最適な方法の選択

最適な方法は、以下の要素を考慮して選択する必要があります。

• 使用しているブラウザ
• スピナーボタンの非表示化方法の要件（スピナー機能の完全な無効化が必要かどうかなど）
• 開発者のスキルレベル

• CSS、JavaScriptの記述には、構文エラーがないように注意してください。