Désactiver les boutons de rotation du webkit sur le type d'entrée = "nombre"?

203

J'ai un site qui est principalement destiné aux utilisateurs mobiles mais aussi aux ordinateurs de bureau.

Sur Mobile Safari, l'utilisation <input type="number">fonctionne très bien car elle fait apparaître le clavier numérique sur les champs de saisie qui ne doivent contenir que des chiffres.

Dans Chrome et Safari cependant, 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 de toute façon inutiles lorsque vous devez écrire quelque chose comme un nombre à 6 chiffres.

Est-il possible de désactiver cela avec -webkit-appearanceou une autre astuce CSS? J'ai essayé sans trop de chance.

css html webkit pojo
la source
15
Si vous préférez utiliser type="text"pour d'autres raisons et que vous êtes passé au nombre uniquement pour la fonction de clavier numérique, vous pouvez utiliser pattern="[0-9]*"pour obtenir la fonction de clavier, ce qui vous permet de conserver type="text". Voir stackoverflow.com/questions/6171903/…
joshuahedlund

Réponses:

114

Le CSS ci-dessous fonctionne pour Chrome et Firefox

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;
}
Rolwin Crasta
la source
8
meilleure solution que ci-dessus (plus complète)
aqm
-moz-apparence: champ de texte; l'addition a été la seule réponse qui a fonctionné pour moi. Merci!
Nanoripper
283

J'ai découvert qu'il y avait une deuxième partie de la réponse à cela.

La première partie m'a aidé, mais j'avais encore un espace à droite de mon type=numberentrée. J'avais mis à zéro la marge sur l'entrée, mais apparemment, je devais aussi mettre à zéro la marge sur le spinner.

Cela l'a corrigé:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
Bob Spryn
la source
Impressionnant. J'ai eu un problème similaire , mais avec une stratégie CSS légèrement différente, qui a conduit à des problèmes entièrement nouveaux ...
Lukas Eder
1
Quelqu'un connaît-il un moyen de corriger le comportement de défilement où vous pouvez faire défiler vers le haut et vers le bas à l'infini? J'ai défini min=0.01(et maxune valeur arbitraire) dans mon élément d'entrée, mais je préférerais que la molette de défilement monte et descend la page. J'utilise AngularJS et je ne trouve rien d'atm.
JaKXz
2
Lien vers une source faisant autorité pour ce problème spécifique et ce type d'informations: css-tricks.com/snippets/css/turn-off-number-input-spinners
Josh Habdas
1
pour être clair, cela ne supprime pas la fonctionnalité de défilement de la souris!
babalu du
1
-moz-apparence: champ de texte pour Firefox
Kevin Suttle
16

Je ne sais pas si c'est la meilleure façon de le faire, mais cela fait disparaître les filateurs sur Chrome 8.0.552.5 dev:

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
robertc
la source
@JethroLarson Sur quoi ne fonctionne-t-il pas? Vous pouvez essayer à la -webkit-outer-spin-buttonplace.
robertc
cela fonctionnait très bien pour type = "date": input [type = date] :: - webkit-external-spin-button {-webkit-apparence: none; }
uglymunky
11

Il semble impossible d'empêcher les filateurs d'apparaître dans Opera. Comme solution de contournement temporaire, vous pouvez faire de la place aux filateurs. Pour autant que je sache, le CSS suivant ajoute juste assez de remplissage, uniquement dans Opera:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}
Goulven
la source
4
@Knu En effet, mais cela vaut la peine d'être mentionné ici parce que le code dans la réponse laisse les entrées inutilisables avec Opera.
Goulven
4
@Goulvench s'il vous plaît ne le faites pas :) Je l'ai trouvé très utile, quelqu'un d'autre pourrait aussi.
2013
-2

Vous pouvez également masquer le spinner avec l'astuce suivante:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}
Sébastien Varinois
la source