Puis-je cacher la boîte de sélection de l'entrée du numéro HTML5?

Question

Existe-t-il un moyen cohérent à travers les navigateurs pour masquer les nouvelles boîtes de sélection que certains navigateurs (comme Chrome) affichent pour l'entrée HTML du numéro de type? Je cherche une méthode CSS ou JavaScript pour empêcher les flèches haut / bas d'apparaître.

 <input id="test" type="number"/>
 

Answer 1

Cette CSS masque efficacement les spin-bouton pour les navigateurs webkit (l'ai testé sur Chrome 7.0.517.44 et Safari 5.0.2 (6533.18.5)):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

Vous pouvez toujours utiliser l'inspecteur (webkit, éventuellement Firebug pour Firefox) pour regarder sur la correspondance de propriétés CSS pour les éléments qui vous intéressent, regardez pour les Pseudo elemnts. Cette image montre les résultats d'un élément input type="number":

Answer 2

Firefox 29 ajoute actuellement le support pour les éléments de nombre, donc voici un extrait pour cacher les filateurs dans les navigateurs webkit et moz:

 input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
 

Answer 3

Selon le guide de codage pour Safari mobile l’expérience utilisateur d’Apple, vous pouvez utiliser ce qui suit pour afficher un clavier numérique dans le navigateur de l’iPhone :

A de fonctionnera également.

Answer 4

Essayez d’utiliser `` à la place. Il apparaît un clavier avec des nombres, et il ne montre pas les boîtes de spin. Il ne nécessite pas JavaScript ou plugins.

Answer 5

Pas ce que vous avez demandé, mais je le fais en raison d'un bug de focus dans WebKit avec des spinboxes:

 // 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 avec ce dont vous avez besoin.