Wie verstecke ich Spin-Buttons in Zahleneingabefeldern in Webkit-Browsern?

Deaktivieren der Spin-Buttons von Webkit bei Input Type="number"

Beim Entwerfen von Websites speziell für mobile Geräte, die aber auch mit Desktops kompatibel sind, treten gewisse Herausforderungen auf entstehen. Ein solches Problem ist die Anzeige unnötiger Drehschaltflächen neben Eingabefeldern, die als numerisch gekennzeichnet sind. Während diese Funktion für das schnelle Erhöhen oder Verringern von Werten von Vorteil sein kann, kann sie die Ästhetik bestimmter Designs beeinträchtigen.

Um diese Drehschaltflächen in Safari- und Chrome-Browsern zu eliminieren, wird empfohlen, CSS-Stiltechniken zu verwenden, die das nutzen -webkit-appearance-Eigenschaft. Hier ist eine Lösung, mit der die Drehschaltflächen effektiv ausgeblendet werden:

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

Indem Sie die Eigenschaft -webkit-appearance auf „none“ setzen, werden die Drehschaltflächen optisch deaktiviert, ohne dass die Funktionalität des numerischen Eingabefelds beeinträchtigt wird. Diese Anpassung gewährleistet ein sauberes und optisch ansprechendes Design und behält gleichzeitig die erwartete numerische Eingabefunktionalität bei.

Um den unerwünschten Raum neben dem Eingabefeld vollständig aufzulösen, ist es außerdem erforderlich, den Rand nicht nur auf der Eingabe selbst zurückzusetzen sondern auch an den Drehknöpfen. Das folgende CSS-Snippet erreicht dies:

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

Durch die Anpassung sowohl des Erscheinungsbilds als auch des Randes der Drehschaltflächen wird ein vollständig optimiertes numerisches Eingabefeld erreicht, das die Benutzererfahrung sowohl für mobile als auch Desktop-Besucher verbessert.

Das obige ist der detaillierte Inhalt vonWie verstecke ich Spin-Buttons in Zahleneingabefeldern in Webkit-Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!