Désactiver les boutons de rotation de webkit sur le type d’entrée = “numéro”?

J’ai un site qui est principalement destiné aux utilisateurs mobiles, mais également au bureau.

Sur Mobile Safari, utiliser fonctionne très bien car il affiche le clavier numérique sur les champs d’entrée qui ne doivent contenir que des nombres.

Dans Chrome et Safari, cependant, l’utilisation des entrées numériques permet d’afficher les 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 numéro à 6 chiffres.

Est-il possible de désactiver cette -webkit-appearance avec l’ -webkit-appearance ou d’autres astuces CSS? J’ai essayé sans beaucoup de chance.

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; } 

J’ai découvert qu’il y avait une seconde partie de la réponse à cette question.

La première partie m’a aidé, mais j’avais toujours un espace à droite de mon type=number saisie du type=number . J’avais mis à zéro la marge sur l’entrée, mais apparemment, je devais également mettre à zéro la marge sur la roue.

Cela corrigé:

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

Pas sûr que ce soit la meilleure façon de le faire, mais cela fait disparaître les spinners sur Chrome 8.0.552.5 dev:

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

Il semble impossible d’empêcher les fileurs d’apparaître dans Opera. En guise de solution temporaire, vous pouvez faire de la place pour les 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; } 

Vous pouvez aussi cacher Spinner avec l’astuce suivante:

 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity:0; pointer-events:none; }