web-dev-qa-db-fra.com

Est-il possible de toujours afficher les flèches haut / bas pour l'entrée "numéro"?

Je veux toujours montrer les flèches haut/bas pour le champ "numéro". Est-ce possible? Jusqu'à présent, je n'ai pas eu de chance ...

http://jsfiddle.net/oneeezy/qunbnL6u/

HTML: 

<input type="number" />

CSS: 

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   -webkit-appearance: "Always Show Up/Down Arrows";

}
html5css3inputwebkitshadow-dom
54
Oneezy

Vous pouvez y parvenir (dans Chrome au moins) en utilisant la propriété Opacity:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1;

}

Comme indiqué ci-dessus, cela ne fonctionnera probablement que dans Chrome. Soyez donc prudent en utilisant ce code dans la nature, sans solution de secours pour les autres navigateurs.

110
BJack

Si vous essayez d'obtenir la même apparence sur différents navigateurs, vous serez peut-être obligé d'utiliser un plugin/widget ou d'en construire un vous-même. Les principaux navigateurs semblent tous implémenter les calculateurs de nombres différemment.

Essayez widget spinner de jQuery UI il offre beaucoup plus de polyvalence en matière de style.

Exemple de travail

<p>
    <label for="spinner">Select a value:</label>
    <input id="spinner" name="value" />
</p>

$("#spinner").spinner();
3
apaul