Webkit ブラウザの数値入力フィールドのスピン ボタンを非表示にする方法

入力時の Webkit のスピン ボタンの無効化 Type="number"

モバイル デバイス専用でデスクトップとも互換性のある Web サイトを設計する場合、特定の課題が発生します。起きます。そのような問題の 1 つは、数値として指定された入力フィールドに隣接して不要なスピン ボタンが表示されることです。この機能は、値を急速に増減させる場合には有益かもしれませんが、特定のデザインの美観を損なう可能性があります。

Safari および Chrome ブラウザーでこれらのスピン ボタンを排除するには、 -webkit-Appearance プロパティ。スピン ボタンを効果的に非表示にする解決策は次のとおりです。

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

-webkit-Appearance プロパティを "none" に設定すると、数値入力フィールドの機能に影響を与えることなく、スピン ボタンが視覚的に無効になります。このカスタマイズにより、期待される数値入力機能を維持しながら、クリーンで視覚的に心地よいデザインが保証されます。

さらに、入力フィールドに隣接する不要なスペースを完全に解決するには、入力自体だけでなくマージンをリセットする必要があります。スピンボタンも同様です。次の CSS スニペットはこれを実現します:

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

スピン ボタンの外観とマージンの両方を調整することで、完全に最適化された数値入力フィールドが実現され、モバイルとデスクトップの両方の訪問者のユーザー エクスペリエンスが向上します。

以上がWebkit ブラウザの数値入力フィールドのスピン ボタンを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。