In Firefox 28 <input type="number">
funktioniert es hervorragend, da die numerische Tastatur in Eingabefeldern angezeigt wird, die nur Zahlen enthalten sollten.
In Firefox 29 werden bei Verwendung von Zahleneingaben 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 ~ 10-stellige Zahl schreiben müssen.
Ist es möglich, dies mit CSS oder jQuery zu deaktivieren?
type="number"
. Mittype="text"
und dempattern
Attribut können Sie einen regulären Ausdruck festlegen, um sicherzustellen, dass es sich um eine Zahl handelt.type="number"
ist erforderlich, damit mobile Browser die numerische Tastatur anstelle der vollständigen Tastatur anzeigen.<input type="tel">
Es sind nur Zahlen und keine Spinner.type="text"
ist eine schlechte Idee, da Touch-Geräte die falsche Tastatur anzeigen.Antworten:
Laut diesem Blog-Beitrag müssen Sie
-moz-appearance:textfield;
auf die setzeninput
.quelle
@-moz-document url-prefix() { ... }
und es macht, was ich will: versteckt die Spinner in Firefox, wo sie schlecht aussehen, aber hält sie in anderen Browsern am Leben, einschließlich solchen, die die numerische Tastatur wie im OP erwähnt aufrufen.Es ist erwähnenswert, dass der Standardwert für
-moz-appearance
diese Elementenumber-input
in Firefox ist.Wenn Sie den Spinner standardmäßig ausblenden möchten, können Sie einstellen ,
-moz-appearance: textfield
zunächst, und wenn Sie möchten , die Spinner erscheinen auf:hover
/:focus
, können Sie die vorherige Styling überschreiben mit-moz-appearance: number-input
.Ich dachte, jemand könnte dies hilfreich finden, da ich dies kürzlich tun musste, um die Konsistenz zwischen Chrome / FF zu verbessern (da sich Zahleneingaben in Chrome standardmäßig so verhalten).
Wenn Sie alle verfügbaren Werte für anzeigen möchten,
-moz-appearance
finden Sie diese hier (mdn).quelle
In
SASS
/SCSS
style können Sie wie folgt schreiben:Auf jeden Fall kann dieser Codestil in verwendet werden
PostCSS
.quelle
quelle
Das gleiche Problem nach dem Firefox-Update auf 29.0.1 ist auch hier aufgeführt: https://bugzilla.mozilla.org/show_bug.cgi?id=947728
Lösungen: Sie (Mozilla-Leute) haben dies behoben, indem sie Unterstützung für "-moz-Erscheinungsbild" für eingeführt haben
<input type="number">
. Sie müssen Ihrem Eingabefeld lediglich einen Stil mit "-moz-appearance:textfield;
" zuordnen.Ich bevorzuge den CSS-Weg. ZB: -
Oder
Sie können es auch inline tun:
quelle
Ich habe einige Antworten aus den obigen Antworten und aus So entfernen Sie die Pfeile aus der Eingabe [type = "number"] in Opera in scss gemischt:
quelle
Das hat bei mir funktioniert:
Gelöst in Firefox, Safari, Chrome. Wird auch
-moz-appearance: textfield;
nicht mehr unterstützt ( https://developer.mozilla.org/en-US/docs/Web/CSS/appearance )quelle