web-dev-qa-db-fra.com

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

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

Sur Mobile Safari, utiliser <input type="number"> fonctionne très bien, car il ouvre le clavier numérique sur les champs de saisie qui ne doivent contenir que des chiffres.

Cependant, dans Chrome et Safari, 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 à 6 chiffres de toute façon.

Est-il possible de le désactiver avec -webkit-appearance ou un autre truc CSS? J'ai essayé sans trop de chance.

csshtml5webkit
202
pojo

Le css ci-dessous fonctionne à la fois 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;
}
110
Rolwin C

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

La première partie m'a aidé, mais il me restait un espace à droite de mon entrée type=number. J'avais mis à zéro la marge sur l'entrée, mais apparemment, je devais aussi mettre à zéro la marge sur la roulette.

Cela l'a corrigé:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
282
Bob Spryn

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

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
15
robertc

Il semble impossible d'empêcher les filateurs d'apparaître dans Opera. En guise de solution temporaire, vous pouvez faire de la place pour les filateurs. Autant que je sache, le CSS suivant ajoute juste assez de padding, uniquement dans Opera:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}
10
Goulven