web-dev-qa-db-fra.com

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

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

Dans Firefox 29, l'utilisation d'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 écrire quelque chose comme un nombre de 6 ~ 10 chiffres de toute façon.

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

jquerycssfirefoxinputspinner
176
NereuJunior

Selon cet article de blog , vous devez définir -moz-appearance:textfield; sur la 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

Il est intéressant de noter que la valeur par défaut de -moz-appearance sur ces éléments est number-input dans Firefox.

Si vous souhaitez masquer le compteur par défaut, vous pouvez définir initialement -moz-appearance: textfield et si vous souhaitez que le filtre apparaisse sur :hover/:focus, vous pouvez écraser 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"/>

Je pensais que cela pourrait être utile car j'ai récemment eu à le faire pour tenter d'améliorer la cohérence entre Chrome/FF (puisque c'est ainsi que 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).

45
Josh Crozier

Dans le style SASS/SCSS, 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.

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

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

Solutions: Ils (les gars de Mozilla) ont résolu ce problème en introduisant le support de "-moz-apparence" pour <input type="number">. Il vous suffit d'associer un style à 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 aussi le faire en ligne:

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