CSS を使用して数値入力フィールドの矢印ボタンを無効にするにはどうすればよいですか?

入力 Type="number" 属性の矢印ボタンを無効にする CSS トリック

ユーザーは、デスクトップ ブラウザの数値入力フィールドで矢印ボタンに遭遇することがよくあります。 ChromeやSafariなど。ただし、これらのボタンは特定のデザインの美しさを損なう可能性があります。 CSS を使用して無効にできますか?

CSS 解決策:

スピン ボタンを無効にするには、入力フィールドの個々の部分を対象とする CSS ルールを使用できます。

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

::-webkit-inner-spin-button は内側の矢印ボタンをターゲットにしていますが、 ::-webkit-outer-spin-button は外側の矢印ボタンをターゲットにします。 -webkit-Appearance を none に設定すると、ボタンが非表示になります。さらに、マージンを 0 に設定すると、ボタンを削除した後に余分なスペースが残らないようになります。

追加の改良点:

ユーザーは、ボタンを非表示にした後でも、入力フィールドの右側に小さなスペースが残りました。これに対処するには、スピナー自体のマージンをターゲットにする必要があります。

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

このルールを適用すると、不要なスペースを完全に削除でき、数値入力フィールドのデザインがよりクリーンで合理化されます。

以上がCSS を使用して数値入力フィールドの矢印ボタンを無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。