Deaktivieren Sie die Spinknöpfe von Webkit am Eingangstyp = “number”?

Ich habe eine Website, die in erster Linie für mobile Benutzer, aber auch für Desktops gedacht ist.

In Mobile Safari funktioniert die Verwendung von sehr gut, da die numerische Tastatur in Eingabefeldern angezeigt wird, die nur Zahlen enthalten sollten.

In Chrome und Safari werden jedoch bei Verwendung von Zahleneingaben Drehfelder auf der rechten Seite des Feldes angezeigt, die in meinem Design wie Mist aussehen. Ich brauche die Knöpfe wirklich nicht, weil sie nutzlos sind, wenn du sowieso eine 6-stellige Zahl schreiben musst.

Ist es möglich, dies mit -webkit-appearance oder einem anderen CSS-Trick zu deaktivieren? Ich habe es ohne viel Glück versucht.

   

Das untenstehende CSS funktioniert sowohl für Chrome als auch für Firefox

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

Ich entdeckte, dass es einen zweiten Teil der Antwort darauf gibt.

Der erste Teil half mir, aber ich hatte immer noch einen Platz rechts von meinem type=number Zahleneingabe. Ich hatte den Spielraum für den Input auf Null gesetzt, aber anscheinend musste ich auch den Rand auf dem Spinner auf null setzen.

Das hat es behoben:

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

Nicht sicher, ob dies der beste Weg ist, um dies zu tun, aber das macht die Spinner auf Chrome 8.0.552.5 dev verschwinden:

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

Es scheint unmöglich zu sein, zu verhindern, dass Spinner in Opera erscheinen. Als vorübergehende Lösung können Sie Platz für die Spinner machen. Soweit ich das beurteilen kann, fügt das folgende CSS gerade genug Padding hinzu, nur in Opera:

 noindex:-o-prefocus, input[type=number] { padding-right: 1.2em; } 

Sie können Spinner auch mit folgendem Trick ausblenden:

 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity:0; pointer-events:none; }