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">
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; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
<input type="number" step="0.01" />
Vous pouvez toujours utiliser l'inspecteur (webkit, éventuellement Firebug pour Firefox) pour rechercher les propriétés CSS correspondantes pour les éléments qui vous intéressent, recherchez les Pseudo éléments. Cette image montre les résultats pour un élément d'entrée type="nombre" :
![Inspecteur pour l'élément input type=number (Chrome)][1]
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.
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.