Webkit ブラウザの数値入力フィールドからスピン ボタンを削除するにはどうすればよいですか?

Webkit ベースのブラウザでのスピン ボタンの表示の防止

Web 開発では、ブラウザ間の互換性の問題がよく発生します。このような問題の 1 つは、<input type="number"> を使用するときに発生します。 Chrome や Safari などの Webkit ベースのブラウザ上で。これらのブラウザでは、数値入力フィールドの右側に不要なスピン ボタンが表示されます。

CSS でスピン ボタンを無効にする

この問題を解決するには、CSS を利用して、これらのブラウザのスピン ボタン。重要なのは、スピン ボタンの外観と動作を制御する特定の CSS プロパティをターゲットにすることです。

次の CSS ルールは、スピン ボタンの外観を削除し、そのマージンをゼロに設定することでこれを実現します。

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

包括的なソリューション

最初は、上記のルールにより、スピン ボタン用に小さなスペースが確保される可能性があります右側にあります。これに対処するには、入力フィールドのパディングもゼロにする必要があります。したがって、完全な CSS ソリューションは次のようになります。

input[type=number] {
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
}

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

この CSS ルールを実装すると、スピン ボタンが事実上無効になり、さまざまなブラウザ間でクリーンで一貫したインターフェイスが残ります。

以上がWebkit ブラウザの数値入力フィールドからスピン ボタンを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。