☰

HTML5 の数値入力のスピンボックスを非表示にできますか? 質問する

tag-icon • tag-icon html css input numbers
HTML5 の数値入力のスピンボックスを非表示にできますか? 質問する

一部のブラウザ (Chrome など) が数値型の HTML 入力用にレンダリングする新しいスピン ボックスを非表示にするための、ブラウザ間で一貫した方法はありますか? 上矢印/下矢印が表示されないようにする CSS または JavaScript メソッドを探しています。

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

ベストアンサー1

この CSS は、Webkit ブラウザのスピン ボタンを効果的に非表示にします (Chrome 7.0.517.44 および Safari バージョン 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 プロパティを検索し、疑似要素を探すことができます。この画像は、入力要素 type="number" の結果を示しています。

input type=number のインスペクター (Chrome)

おすすめ記事