Puis-je masquer la boîte de rotation de l'entrée numérique HTML5 ?

Existe-t-il un moyen cohérent, d'un navigateur à l'autre, de masquer les nouveaux champs de saisie que certains navigateurs (comme Chrome) affichent pour les entrées HTML de type numérique ? Je cherche une méthode CSS ou JavaScript pour empêcher l'apparition des flèches haut/bas.

<input id="test" type="number">
Sebas
Question modifiée 20 novembre 2016 в 4:07
Programmation
numbers html5 javascript css input
24 septembre 2010 в 8:58
23 vues
Solution

Cette feuille de style CSS masque effectivement le bouton de rotation pour les navigateurs webkit (je l'ai testée dans Chrome 7.0.517.44 et Safari Version 5.0.2 (6533.18.5)) :


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none;
Mikael Dúi Bolinder
Réponse modifiée 11 février 2019 в 11:33
Commentaires (5)

Selon le [guide de codage de l'expérience utilisateur d'Apple pour Safari mobile][1], vous pouvez utiliser les éléments suivants pour afficher un clavier numérique dans le navigateur de l'iPhone :

<input type="text" pattern="[0-9]*" />

Un modèle de d* fonctionnera également.

[1] : http://developer.apple.com/library/safari/codinghowtos/Mobile/UserExperience/_index.html#//apple_ref/doc/uid/DTS40008248-CH1-SUBSECTION11

Rory O'Kane
Réponse modifiée 15 août 2013 в 10:22
Commentaires (9)

Ce n'est pas ce que vous avez demandé, mais je fais cela à cause d'un bug de mise au point dans WebKit avec les spinbox :

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

Cela pourrait vous donner une idée pour vous aider à répondre à vos besoins.

Commentaires (1)