Gibt es eine konsistente Möglichkeit für alle Browser, die neuen Drehfelder auszublenden, die einige Browser (z. B. Chrome) für HTML-Eingaben der Typennummer rendern? Ich suche nach einer CSS- oder JavaScript-Methode, um zu verhindern, dass die Aufwärts- / Abwärtspfeile angezeigt werden.
<input id="test" type="number">
<input type="number" min="4" max="8" />
in Chrome und sehe ein typisches Eingabefeld mit Aufwärts- und Abwärtspfeilen an der Seite.<input type="number" pattern="[0-9]*" inputmode="numeric">
. Weitere Informationen: stackoverflow.com/a/31619311/806956<input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... >
und zu verwenden , um die Validierung durchzuführen. Ich habe diesen Ansatz nicht getestet, weshalb dies eher ein Kommentar als eine Antwort ist.Antworten:
Dieses CSS verbirgt effektiv den Drehknopf für Webkit-Browser (hat ihn in Chrome 7.0.517.44 und Safari Version 5.0.2 (6533.18.5) getestet):
Sie können jederzeit den Inspektor (Webkit, möglicherweise Firebug for Firefox) verwenden, um nach übereinstimmenden CSS-Eigenschaften für die Elemente zu suchen, an denen Sie interessiert sind, und nach Pseudoelementen zu suchen. Dieses Bild zeigt Ergebnisse für einen Eingabeelementtyp = "Nummer":
quelle
display: none;
als einzigestype=number
wenn Sie diese Pfeile ausblenden müssen. Derzeit werden sie beispielsweise noch in Opera angezeigt und in Firefox, IE usw. angezeigt, wenn sie diesen Eingabetyp implementieren.max=
undmin=
für<input>
so alternative Lösungen verwenden, wie z. B.type="text"
ungültiges HTML5. Die Leute erwähnen auch Opera, einschließlich dieser Spinner. Gibt es eine ähnliche Lösung für Opera wie Safari / Chrome?input::-webkit-clear-button
für die X-SchaltflächeFirefox 29 bietet derzeit Unterstützung für Zahlenelemente. Hier ist ein Ausschnitt zum Ausblenden der Spinner in Webkit- und Moz-basierten Browsern:
quelle
Kurze Antwort:
Längere Antwort:
Zur vorhandenen Antwort hinzufügen ...
Feuerfuchs:
In aktuellen Versionen von Firefox ist der Standardwert (Benutzeragent) der
-moz-appearance
Eigenschaft für diese Elementenumber-input
. Wenn Sie diesen Werttextfield
ändern, wird der Spinner effektiv entfernt.In einigen Fällen können Sie die Spinner versteckt werden zunächst , und dann auf schweben / Fokus erscheinen. (Dies ist derzeit das Standardverhalten in Chrome.) In diesem Fall können Sie Folgendes verwenden:
Chrom:
In aktuellen Versionen von Chrome ist der Standardwert (Benutzeragent) der
-webkit-appearance
Eigenschaft für diese Elemente bereits vorhandentextfield
. Um die Spinner zu entfernen, die-webkit-appearance
Wert Bedürfnisse der Unterkunft bis geändert werdennone
auf den::-webkit-outer-spin-button
/::-webkit-inner-spin-button
Pseudo-Klassen (es ist-webkit-appearance: inner-spin-button
standardmäßig aktiviert ).Es sei darauf hingewiesen, dass
margin: 0
in älteren Versionen von Chrome der Rand entfernt wird .Derzeit ist hier das Standard-User-Agent-Styling für die Pseudoklasse 'Inner-Spin-Button':
quelle
Laut Apples User Experience Coding Guide für Mobile Safari können Sie Folgendes verwenden, um eine numerische Tastatur im iPhone-Browser anzuzeigen:
Eine
pattern
der\d*
wird auch funktionieren.quelle
Versuchen Sie es
input type="tel"
stattdessen. Es öffnet sich eine Tastatur mit Zahlen und es werden keine Drehfelder angezeigt. Es erfordert kein JavaScript oder CSS oder Plugins oder irgendetwas anderes.quelle
type=number
Fall ist.Fügen Sie dieses CSS nur hinzu, um den Spinner bei Eingabe der Zahl zu entfernen
quelle
input[type=number]{ -webkit-appearance }
sollte für chrom ausreichend sein, aber natürlich muss man auch die pseudo-elemente modifizieren. Irgendeine Idee warum?Ich bin auf dieses Problem mit einem gestoßen
input[type="datetime-local"]
ähnlich ist.Und ich habe einen Weg gefunden, diese Art von Problemen zu überwinden.
Zuerst müssen Sie die Shadow-Root-Funktion von Chrome über "DevTools -> Einstellungen -> Allgemein -> Elemente -> Schatten-DOM des Benutzeragenten anzeigen" aktivieren.
Dann können Sie alle schattierten DOM-Elemente sehen , z. B.
<input type="number">
lautet das vollständige Element mit schattiertem DOM:Und gemäß diesen Informationen können Sie CSS entwerfen, um unerwünschte Elemente zu verbergen, genau wie @Josh sagte.
quelle
Nicht das, wonach Sie gefragt haben, aber ich mache dies aufgrund eines Fokusfehlers in WebKit mit Spinboxen:
Es könnte Ihnen eine Idee geben, mit dem zu helfen, was Sie brauchen.
quelle
Dies ist eine bessere Antwort, die ich bei Maus über und ohne Maus vorschlagen möchte
quelle
margin: 0
? Auchspin-button
scheinen die Pseudoelementehover
in neueren Browsern nicht ausgelöst zu werden?Damit dies in Safari funktioniert, fand ich, dass das Hinzufügen von! Wichtig für die Webkit-Anpassung das Ausblenden des Drehknopfs erzwingt.
Ich habe immer noch Probleme, eine Lösung für Opera zu finden.
quelle
Unter Firefox für Ubuntu nur mit
hat den Trick für mich gemacht.
Hinzufügen
Würde mich dazu führen
jedes Mal, wenn ich es versuchte. Gleiches gilt für den inneren Drehknopf.
quelle
-webkit-*
ist für Chrome,-moz-*
ist für Mozilla Firefox. Deshalb hat es bei Ihnen nicht funktioniert.quelle
Ändern Sie möglicherweise die Zahleneingabe mit Javascript in Texteingabe, wenn Sie keinen Spinner möchten.
und den Benutzer daran hindern, Text einzugeben;
Lassen Sie das Javascript es dann wieder ändern, falls Sie einen Spinner wollen.
es hat gut für meine Zwecke funktioniert
quelle
Verwenden Sie in WebKit- und Blink-basierten Browsern und allen Arten von Browsern das folgende CSS:
quelle
webkit
? Bei der Beantwortung einer neun Jahre alten Frage mit vierzehn vorhandenen Antworten ist es wichtig, eine Erklärung hinzuzufügen, wie und warum Ihre Antwort funktioniert, und zu erwähnen, welchen neuen Aspekt der Frage sie beantwortet.Ich brauchte das, um zu arbeiten
Die zusätzliche Zeile von
appearance: none
war der Schlüssel zu mir.quelle
Ich fand eine super einfache Lösung mit
Dies wird von den meisten Browsern unterstützt: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
quelle