Deaktivieren Sie die Drehschaltflächen des Webkits bei Eingabetyp = "Nummer"?

203

Ich habe eine Website, die hauptsächlich für mobile Benutzer, aber auch für Desktops gedacht ist.

In Mobile Safari <input type="number">funktioniert die Verwendung hervorragend, da die numerische Tastatur in Eingabefeldern angezeigt wird, die nur Zahlen enthalten sollten.

In Chrome und Safari werden bei Verwendung von Zahleneingaben jedoch Drehknöpfe auf der rechten Seite des Felds angezeigt, was in meinem Design wie Mist aussieht. Ich brauche die Tasten wirklich nicht, weil sie nutzlos sind, wenn Sie sowieso so etwas wie eine 6-stellige Zahl schreiben müssen.

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

css html webkit Pojo
quelle
15
Wenn Sie es type="text"aus anderen Gründen bevorzugen und nur für die numerische Tastaturfunktion auf Nummer umgestellt haben, können Sie pattern="[0-9]*"die Tastaturfunktion verwenden, um sie beizubehalten type="text". Siehe stackoverflow.com/questions/6171903/…
joshuahedlund

Antworten:

114

Das folgende 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;
}
Rolwin Crasta
quelle
8
bessere Lösung als oben (vollständiger)
aqm
-Moz-Aussehen: Textfeld; Außerdem war die einzige Antwort, die für mich funktioniert hat. Vielen Dank!
Nanoripper
283

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

Der erste Teil hat mir geholfen, aber ich hatte immer noch ein Leerzeichen rechts von meiner type=numberEingabe. Ich hatte den Rand des Eingangs auf Null gesetzt, aber anscheinend musste ich auch den Rand des Spinners auf Null setzen.

Dies hat es behoben:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
Bob Spryn
quelle
Genial. Ich hatte ein ähnliches Problem , aber mit einer etwas anderen CSS-Strategie, die zu völlig neuen Problemen führte ...
Lukas Eder
1
Kennt jemand eine Möglichkeit, das Bildlaufverhalten zu korrigieren, bei dem Sie unendlich nach oben und unten scrollen können? Ich habe in meinem Eingabeelement einen beliebigen Wert festgelegt min=0.01(und maxeinen beliebigen Wert festgelegt), aber ich würde es vorziehen, wenn das Scrollrad die Seite nur auf und ab bewegt. Ich benutze AngularJS und kann nichts atm finden.
JaKXz
2
Link zurück zu einer maßgeblichen Quelle für dieses spezielle Problem und diese Art von Informationen: css-tricks.com/snippets/css/turn-off-number-input-spinners
Josh Habdas
1
um klar zu sein, dies entfernt nicht die Maus-Scroll-Funktion!
Babalu
1
-moz-Auftritt: Textfeld für Firefox
Kevin Suttle
16

Ich bin mir nicht sicher, ob dies der beste Weg ist, aber dadurch verschwinden die Spinner auf Chrome 8.0.552.5 dev:

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
Robertc
quelle
@JethroLarson Woran funktioniert es nicht? Sie könnten es -webkit-outer-spin-buttonstattdessen versuchen .
Robertc
Dies funktionierte hervorragend für type = "date": input [type = date] :: - Webkit-Outer-Spin-Button {-webkit-Erscheinungsbild: keine; }
uglymunky
11

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

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}
Goulven
quelle
4
@Knu In der Tat, aber es ist erwähnenswert, da der Code in der Antwort die Eingaben mit Opera unbrauchbar macht.
Goulven
4
@Goulvench bitte nicht :) Ich fand es sehr nützlich, jemand anderes könnte es auch.
Freitag,
-2

Sie können den Spinner auch mit folgendem Trick verstecken:

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