HTML5 数値入力でスピン ボックスを非表示にするにはどうすればよいですか?

HTML5 数値入力のスピン ボックスを非表示にする

Chrome などの最新のブラウザでは、値の調整に便利なように、HTML5 数値入力の横にスピン ボックスが表示されることがよくあります。ただし、これらのスピン ボックスは、ユーザー インターフェイスに干渉することがあります。

スピン ボックスを非表示にする 1 つの方法は、CSS を使用することです。

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

この CSS は、Webkit ブラウザーでスピン ボックスを効果的に非表示にします (例: 、Chrome、Safari) を使用しながら、-moz-Appearance:textfield プロパティを使用して Firefox との互換性を確保します。

実装することでこの CSS を使用すると、上/下矢印の表示を防ぎ、数値入力のためのよりクリーンで合理化されたユーザー インターフェイスを提供できます。

以上がHTML5 数値入力でスピン ボックスを非表示にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。