WebKit Desktop-Browser fügen Nummerneingaben kleine Auf-/Ab-Pfeile hinzu, die Spinner genannt werden. Sie können diese visuell wie folgt deaktivieren:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}Beachten Sie, dass andere Funktionen weiterhin bestehen, wie z. B. das Erhöhen der Zahl per Mausrad.
David bloggte eine andere Methode im Juni 2021.
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
Hat jemand eine Idee, wie man die Spinner-Schaltflächen gestalten kann, *abgesehen* davon, sie zu deaktivieren? Ich habe ein höheres Textfeld als Standard und möchte die Spinner etwas größer und leichter klickbar machen...
Ja, dort, wo margin:0 steht, sollten Sie das Element von dort aus gestalten können.
Ich suche nach der Dokumentation zu diesem Element. Ich möchte die Spinner auf Mobilgeräten aktivieren.
Können wir das Ändern von Werten stoppen, wenn wir den Mauszeiger auf dem fokussierten Element lassen und das Mausrad drehen? Wenn ja, bitte geben Sie eine Lösung an.
Das funktioniert wirklich...
Ich habe festgestellt, dass eine Erhöhung des `line-height`-Werts die Pfeiltasten vergrößert, während das `height`-Attribut allein die Box in der gewünschten Größe belässt.
Danke!
Sie können die Schaltflächen auch nach Belieben gestalten, indem Sie :before und :after verwenden.
Hier ist ein sehr einfaches Beispiel und ein fiddle (enthält auch ein gestaltetes Suchfeld).
Großartig!
Das hat vor einiger Zeit in Chrome aufgehört zu funktionieren. Anscheinend können Sie keine Pseudo-Elemente mehr zu diesen Selektoren hinzufügen, was schade ist, da es nur 1 Selektor für die Auf- und Abwärts-Schaltfläche gibt.
Verwenden Sie jQuery, um das Mausrad zu deaktivieren.
NICHT ausblenden, nur das Ereignis verhindern. Der Fokusverlust beim Mausrad ist eine schlechte Benutzererfahrung.
Das heißt, eine schlechte Erfahrung.
Warum würden Sie die Eingabe ausblenden? Wie ärgerlich für den Benutzer. Verhindern Sie einfach, dass das Ereignis ausgelöst wird.
Wie macht man das Gleiche in umgekehrter Reihenfolge: `-webkit-textfield-decoration-container` auf `read-only` setzen, aber die Schaltflächen auf `enabled`?
Wie deaktiviert man das Scrollen (sauber) mit AngularJS oder HTML5? Ich habe die Dokumentation durchsucht, aber nichts gefunden... Ich war kurz beeindruckt von der HTML5-Spezifikation für `number`, bemerkte dann aber diesen Fehler. :(
Hallo,
Haben Sie eine Lösung dafür gefunden? Wie kann man das mit Angular JS verhindern? Lassen Sie es mich wissen, falls ja?
Vielen Dank,
Rocky
Sie können eine Direktive wie diese schreiben.
Gibt es eine Lösung für Firefox 29?
Okay, hier ist die Lösung für Firefox 29:
input[type=number] {
-moz-appearance: textfield;
}
Danke, ich habe nach einer möglichen Lösung ohne JavaScript und für Firefox gesucht.
Schöne Korrektur!
Aber das widerspricht dem Zweck, die Eingabe auf Zahlen zu beschränken, lol.
Großartig! Danke.
Danke für die FF 29-Lösung.
Ahhh nett! Danke für die Korrektur in FF 29 @Stephan! Das ist perfekt!
Wirklich nett, Stephan. Danke, Mann!
Gibt es eine Möglichkeit, Nummern-Inputs mit und ohne Spinner zu haben?
Ich versuche, bestimmte Eingaben mit einem Klassennamen zu versehen.
@Don
input[type=number].input-number–noSpinners { -moz-appearance: textfield; }
input[type=number].input-number–noSpinners::-webkit-inner-spin-button,
input[type=number].input-number–noSpinners::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Fügen Sie die Klasse `input-number–noSpinners` zu den Eingaben hinzu, die keine Spinner haben sollen.
Danke. Hat sehr geholfen und funktioniert perfekt.
Danke. Funktioniert perfekt (y).
@Pavel
Danke, das hat funktioniert!
Ich bin mir nicht sicher, ob es an dieser Stelle oder für diesen speziellen Artikel wichtig ist, aber ich habe gerade einige Recherchen zum Namen des Spinner-Widgets abgeschlossen. Schauen Sie sich das an, wenn Sie Zeit haben. Andere Benutzer finden diese Informationen möglicherweise hilfreich, wenn sie nach der besten Methode zur Implementierung dieser Funktionalität suchen...
Ist „Numeric Spinner“ der beste Name dafür?
http://uxfindings.blogspot.com/2014/06/is-numeric-spinner-best-name-for-this.html
Das funktioniert NICHT auf Opera Mobile, es zeigt hartnäckig die nervigen Spinner-Schaltflächen an.
Es ist ärgerlich, dass Sie überhaupt Opera Mobile in Betracht ziehen.
Ich liebe Brunos Vorschlag, aber ich wollte, dass dies standardmäßig für alle Nummern-Eingabefelder gilt, also habe ich es leicht modifiziert. Mit dem folgenden Code wird das Mausrad automatisch deaktiviert (für Nummern-Eingaben) ohne zusätzliches HTML!
Wenn Sie möchten, dass einige Felder Spinner haben und andere nicht, da `step="0"` für einen Spinner unsinnig ist, können Sie Folgendes tun:
input[step="0"]::-webkit-inner-spin-button { -webkit-appearance: none;}Alle Eingabefelder mit einem Schritt von 0 erhalten keine Spinner, die restlichen schon.
Wunderbar, danke.
Danke, Simon! Gut gemacht.
Noch etwas, können wir diese Spinner gestalten? Zum Beispiel eine größere Höhe und Breite?
Ich habe Padding verwendet, um es größer zu machen.
@Bruno und Jacob: Danke für den Vorschlag. Ich möchte auch die Auf- und Ab-Tasten für denselben Zweck deaktivieren. Wie kann ich das tun?
@Nikhil, ich bin mir nicht sicher, ob das mit einer Nummern-Eingabe möglich ist (zumindest basierend auf meiner Recherche). Was ist mit der Verwendung einer Texteingabe? Wenn Sie eine Nummern-Eingabe wünschen, damit Touch-Geräte eine Nummerntastatur anzeigen, sollten Sie versuchen, zwei Eingabefelder (eines „Nummer“ und eines „Text“) zu verwenden und dann JavaScript oder CSS zu verwenden, um nur das anzuzeigen, das die gewünschte Funktionalität auf dem aktuellen Gerät hat.
Hier ist eine Lösung, die für Firefox und andere -moz-basierte Browser funktioniert:
@Pavel, @Liam McArthur
Ich habe Ihre Lösung ausprobiert, aber sie funktioniert nicht... mit FF 32, HTML5, cshtml...
-webkit-appearance wird nicht erkannt...
dieses `-moz-appearance: textfield;` ist in Ordnung, aber ich verliere die Kontrolle über den spezifischen Typ Nummer...
und `::-webkit-inner-spin-button` existiert nicht als Auswahl für CSS...
Der ursprünglich gepostete Code funktioniert nicht in Firefox. Er funktioniert in Chrome und Opera. Firefox zeigt die Spinner an, passt sie aber nicht an eine bestimmte Box-Höhe an. C und O tun dies. Haben Sie das unter Windows 9+ getestet? Warum umgehen und Zeit damit verschwenden? Warten Sie einfach, bis Firefox nachzieht. Es ist besser, die Unvollkommenheiten eines bestimmten Browsers jederzeit aufzudecken/zu zeigen, als zu versuchen, sie zu beheben. Sie alle holen ihre Unvollkommenheiten heutzutage ziemlich schnell auf. 18. Dezember 2014.
Es funktioniert nicht in Firefox. Irgendwelche Ideen dazu?
cool!!
Funktioniert nicht in FF 38.0.6 auf einem PC.
Was ist, wenn Sie die Inkremente immer anzeigen möchten, nicht nur beim Hover?
Ich glaube, Sie beziehen sich auf das Chrome-Verhalten? Ich möchte die Spinner auch immer sichtbar machen, habe aber noch keine Möglichkeit gefunden.
Jeder Hinweis, wie ich dies einem bestimmten Nummernfeld mit der ID `id="mynumberfield"` zuweisen kann, wäre super!
Versuchen Sie
Das funktioniert nicht in FF, Opera,
und wenn ich benutze
input[type=number] {
-moz-appearance: textfield;
}
Dies verliert die Kontrolle über den spezifischen Typ Nummer. Bitte sagen Sie mir die Lösung für FF und Opera.
Hallo Ashu
Wir können verwenden
input[type=number] {
-moz-appearance: textfield;
}
diesen hier
Oder verweisen Sie bitte auf diesen Link— http://exisweb.net/css-input-number-firefox —vielleicht hilft er...
Firefox erkennt `webkit-appearance` nicht.
Hallo Rami,
Sie können diese Lösung bevorzugen.
input[type=number] {
-moz-appearance: textfield;
}
Oder verweisen Sie bitte auf diesen Link— http://exisweb.net/css-input-number-firefox —vielleicht hilft er...
Danke
Dieser Beitrag sollte aktualisiert werden.
ups...
In meiner Chrome v51 scheint `-webkit-appearance:none;` nicht mehr zu funktionieren. Ich habe stattdessen `-webkit-appearance:textfield;` verwendet.
Manchmal brauche ich diesen Spinner, gibt es eine Möglichkeit, eine Klasse dafür zu erstellen? Bitte helfen Sie.
Funktioniert in Firefox
input[type=number] {
-moz-appearance: textfield;
}
Es funktioniert, aber ich möchte keine Texteingabe im Feld zulassen. Was kann ich dann tun? Dies ist keine perfekte Lösung.
Vielen Dank. Das ist sehr hilfreich. :)
Danke dafür. Ich bin super begeistert, eine Lösung gefunden zu haben. Diese Spinner können an bestimmten Stellen sehr unerwünscht sein. Toll zu wissen, dass ich sie jederzeit ein-/ausschalten kann.
Es funktioniert nicht in Mozilla.
Beachten Sie, dass der Text besagt, dass dieser Schnipsel für WebKit-Browser ist. Firefox würde eine andere Lösung erfordern.
Es hat wie ein Profi funktioniert, vielen Dank.
Auf https://css-tricks.de/snippets/css/turn-off-number-input-spinners/ gibt es eine unvollständige Lösung.
Funktioniert für Chrome, aber für Firefox müssen Sie Folgendes hinzufügen:
damit es funktioniert.
Quelle: https://stackoverflow.com/a/23374725/861615
für Firefox
Ausgezeichnet! Aber es funktioniert nur in Chrome. Gibt es eine Möglichkeit, das in Mozilla zu tun?
Um die Scroll-Option für Chrome und Firefox zu deaktivieren, können Sie den folgenden JS-Code verwenden:
$(‘:input[type=number]’).on(‘wheel’, function (e) { $(this).blur(); });
Funktioniert nicht in Firefox (69.0 (64-bit)).
Für Firefox müssen Sie Folgendes hinzufügen:
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
$(document).on(“wheel”, “input[type=number]”, function (e) {
$(this).blur();
});
Ich bin mir nicht sicher, wofür `margin: 0` benötigt wird. Ich kann ehrlich gesagt keinen Unterschied sehen, wenn ich es nicht verwende. Ändert der Spinner die Größe des Eingabeelements, es sei denn, der Rand wird zurückgesetzt?
Vielleicht liegt es an der CSS-Normalisierung, die ich verwende, und ich sehe keinen Unterschied.
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}