1. ホーム
  2. javascript

[解決済み] HTML5の数値入力のスピンボックスを非表示にすることはできますか?

2022-03-19 04:10:53

質問

いくつかのブラウザ(Chromeなど)が数字タイプのHTML入力に対して表示する新しいスピンボックスを非表示にする、ブラウザ間で一貫性のある方法はありますか? 私は、上下の矢印が表示されないようにするCSSまたはJavaScriptメソッドを探しています。

<input id="test" type="number">

解決方法は?

このCSSは、webkitブラウザでスピンボタンを効果的に隠します(Chrome 7.0.517.44 と Safari Version 5.0.2 (6533.18.5) でテスト済みです)。

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

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

インスペクタ (webkit, Firefox では Firebug) を使用すると、常に、興味のある要素に一致する CSS プロパティを検索し、擬似要素を探すことができます。この画像は、input 要素 type="number" の結果を示しています。