Masquer le spinner dans le numéro d'entrée - Firefox 29

202

Sur Firefox 28, j'utilise très bien les <input type="number">travaux car cela fait apparaître le clavier numérique sur les champs de saisie qui ne doivent contenir que des chiffres.

Dans Firefox 29, l'utilisation des entrées numériques affiche des boutons de rotation sur le côté droit du champ, ce qui ressemble à de la merde dans ma conception. Je n'ai vraiment pas besoin des boutons, car ils sont inutiles lorsque vous devez de toute façon écrire quelque chose comme un nombre de 6 à 10 chiffres.

Est-il possible de désactiver cela avec CSS ou jQuery?

jquery css firefox input spinner NereuJunior
la source
2
Si vous ne voulez pas les flèches de rotation, alors n'utilisez pas type="number". Vous pouvez utiliser type="text"et l' patternattribut pour définir une expression régulière pour vous assurer qu'il s'agit d'un nombre.
Rocket Hazmat
4
-webkit-bouton-spin-interne -webkit-bouton-spin-externe avec apparence -webkit: aucun; marge: 0; Ne fonctionne pas dans Firefox.
NereuJunior
12
@RocketHazmat: type="number"est requis pour que les navigateurs mobiles affichent le clavier numérique au lieu du clavier complet.
CodeManX
3
<input type="tel">ce ne sont que des chiffres et cela n'inclut pas les filateurs.
TomasVeras du
5
Changer type="text"est une mauvaise idée car les appareils tactiles afficheront le mauvais clavier.
WhyNotHugo

Réponses:

522

Selon ce billet de blog , vous devez configurer -moz-appearance:textfield;le 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"/>
Développer l'extrait

Richard Deeming
la source
1
J'ai enveloppé cela @-moz-document url-prefix() { ... }et il fait ce que je veux: cache les filateurs dans Firefox, où ils ont l'air mauvais, mais les maintiennent en vie dans d'autres navigateurs, y compris ceux qui affichent le clavier numérique comme l'OP l'a mentionné.
Michael Scheper
4
Quelques informations plus utiles de Geoff Graham: Entrées numériques - Une comparaison des paramètres par défaut du navigateur
Richard Deeming
3
cela fonctionne et en effet il supprime les filateurs, mais vous pouvez maintenant y entrer des caractères alphanumériques. J'espère que quelqu'un trouvera un moyen de gérer ce scénario sans avoir à vérifier les clés saisies, qu'elles soient numériques ou non.
Jovanni G
1
@JovanniG: Même si vous ne supprimez pas les filateurs, vous pouvez toujours saisir des caractères non numériques dans l'entrée de Firefox. Essayez-le avec la démo sur MDN . Chrome empêche la saisie non numérique dans les deux exemples.
Richard Deeming
1
@alxndr: De plus, je viens d'essayer le "Run code snippet" dans Chrome 66, et cela fonctionne comme prévu.
Richard Deeming
50

Il convient de souligner que la valeur par défaut de -moz-appearanceces éléments estnumber-input dans Firefox.

Si vous souhaitez masquer le spinner par défaut, vous pouvez définir -moz-appearance: textfieldinitialement, et si vous souhaitez que le spinner apparaisse sur :hover/ :focus, vous pouvez remplacer le style précédent avec -moz-appearance: number-input.

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
<input type="number"/>
Développer l'extrait

Je pensais que quelqu'un pourrait trouver cela utile car j'ai récemment dû le faire dans le but d'améliorer la cohérence entre Chrome / FF (car c'est la façon dont les entrées numériques se comportent par défaut dans Chrome).

Si vous voulez voir toutes les valeurs disponibles pour -moz-appearance, vous pouvez les trouver ici (mdn).

Josh Crozier
la source
10

Dans SASS/ SCSSstyle, vous pouvez écrire comme ceci:

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

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

Ce style de code peut certainement être utilisé dans PostCSS.

AmerllicA
la source
7 
/* 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;}
navin prakash
la source
3

Face au même problème après la mise à jour de Firefox vers 29.0.1, cela est également répertorié ici https://bugzilla.mozilla.org/show_bug.cgi?id=947728

Solutions: Ils (les gars de Mozilla) ont corrigé cela en introduisant le support de "-moz-apparence" pour <input type="number">. Il vous suffit d'avoir un style associé à votre champ de saisie avec " -moz-appearance:textfield;".

Je préfère la manière CSS Par exemple: -

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

Ou

Vous pouvez également le faire en ligne:

<input type="number" style="-moz-appearance: textfield">
Abhijeet
la source
0

J'ai mélangé quelques réponses des réponses ci-dessus et de Comment supprimer les flèches de l'entrée [type = "number"] dans Opera en scss:

input[type=number] {
  &,
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;

    &:hover,
    &:focus {
      -moz-appearance: number-input;
    }
  }
}

Tested on chrome, firefox, safari
Darex1991
la source