it-swarm.com.de

Spinner in der Eingabenummer verstecken - Firefox 29

Unter Firefox 28 verwende ich <input type="number"> funktioniert hervorragend, da die numerische Tastatur in Eingabefeldern angezeigt wird, die nur Zahlen enthalten sollten.

In Firefox 29 werden bei der Verwendung von Zahleneingaben Drehschaltflächen auf der rechten Seite des Feldes 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?

176
NereuJunior

Laut diesem Blog-Beitrag musst du -moz-appearance:textfield; auf dem input.

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;
}
<input type="number" step="0.01"/>
468
Richard Deeming

Es sei darauf hingewiesen, dass der Standardwert von -moz-appearance Für diese Elemente in Firefox number-input Ist.

Wenn Sie den Drehregler standardmäßig ausblenden möchten, können Sie zunächst -moz-appearance: textfield Festlegen, und wenn Sie möchten, wird der Drehregler auf :hover/:focus können Sie das vorherige Styling mit -moz-appearance: number-input überschreiben.

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
<input type="number"/>

Ich dachte, jemand könnte das hilfreich finden, da ich dies kürzlich tun musste, um die Konsistenz zwischen Chrome/FF zu verbessern (da sich die Zahleneingaben in Chrome standardmäßig so verhalten).

Wenn Sie alle verfügbaren Werte für -moz-appearance Sehen möchten, können Sie sie finden hier (mdn).

45
Josh Crozier

Im SASS/SCSS -Stil können Sie folgendermaßen schreiben:

input[type='number'] {
  -moz-appearance: textfield;/*For FireFox*/

  &::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
    -webkit-appearance: none;
    margin: 0;
  }
}

Auf jeden Fall kann dieser Codestil in PostCSS verwendet werden.

10
AmerllicA
/* for chrome */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;}             


/* for mozilla */  
   input[type=number] {-moz-appearance: textfield;}
6
navin prakash

Nach dem Firefox-Update auf 29.0.1 ist dasselbe Problem aufgetreten. Dies ist auch hier aufgeführt https://bugzilla.mozilla.org/show_bug.cgi?id=947728

Lösungen: Sie (Mozilla-Typen) haben dies behoben, indem sie die Unterstützung für "-moz-appear" für <input type="number"> Eingeführt haben. Sie müssen lediglich mit "-moz-appearance:textfield;" Einen Stil mit Ihrem Eingabefeld verknüpfen.

Ich bevorzuge die CSS-Methode.

.input-mini{
-moz-appearance:textfield;}

Oder

Sie können dies auch inline tun:

<input type="number" style="-moz-appearance: textfield">
4
Abhijeet