Comment supprimer les flèches de l'entrée [type="nombre"] dans Opera

Question

Je cherche juste à supprimer ces flèches, pratiques dans certaines situations.

Je voudrais cependant que le navigateur reste conscient que le contenu est purement numérique. Ainsi, en le changeant en input[type="text"] n'est pas une solution acceptable.

---

Maintenant qu'Opera est basé sur webkit, cette question est un dulpicate de : Puis-je masquer la boîte de rotation de l'entrée numérique HTML5 ?

Answer 1

J'ai utilisé une simple feuille de style en cascade qui semble les supprimer et fonctionner correctement.

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

<input type="number" step="0.01"/>

Ce tutoriel de CSS Tricks l'explique en détail et montre également comment les styliser.

Answer 2

Ces flèches font partie de la DOM de l'ombre qui sont en fait des éléments DOM de votre page qui vous sont cachés. Si l'idée vous est nouvelle, une bonne lecture d'introduction peuvent être trouvés ici .

Dans la plupart des cas, le Shadow DOM nous fait gagner du temps et est bon. Mais il y a des cas, comme cette question, où vous voulez le modifier.

Vous pouvez maintenant les modifier dans Webkit avec les bons sélecteurs mais il n'en est encore qu'aux premiers stades de développement. Le Shadow DOM lui-même n'a pas encore de sélecteurs unifiés, donc les sélecteurs de webkit sont propriétaires (et il ne s'agit pas simplement d'ajouter -webkit comme dans d'autres cas).

Pour cette raison, il est probable qu'Opera n'a pas encore eu le temps de l'ajouter. Il est cependant difficile de trouver des ressources sur les modifications DOM d'Opera Shadow. Quelques des sources internet non fiables J'ai trouvé que tous disent ou suggèrent qu'Opera ne supporte pas actuellement la manipulation Shadow DOM.

J'ai passé un peu de temps à parcourir le site web d'Opera pour voir s'il y avait une mention à ce sujet, ainsi qu'à essayer de les trouver dans Dragonfly... aucune de ces recherches n'a abouti. En raison du silence sur cette question, et de la nature en développement de la manipulation Shadow DOM + Shadow DOM, il semble être une conclusion sûre que vous ne pouvez tout simplement pas le faire dans Opera, au moins pour le moment.

Answer 3

Il n'y a pas moyen.

Cette question est en fait une duplication de la question suivante Existe-t-il un moyen de masquer les nouveaux contrôles spinbox HTML5 affichés dans Google Chrome et Opera ? mais peut-être pas un duplicata complet, puisque la motivation est donnée.

Si l'objectif est de "sensibiliser le navigateur au fait que le contenu est purement numérique", il faut alors réfléchir à ce que cela signifie réellement. Les flèches, ou les tourniquets, contribuent à rendre la saisie numérique plus confortable dans certains cas. Une autre partie consiste à vérifier que le contenu est un nombre valide, et sur les navigateurs qui prennent en charge les améliorations de la saisie HTML5, vous pourriez être en mesure de le faire à l'aide de la balise pattern attribut. Cet attribut peut également affecter une troisième caractéristique d'entrée, à savoir le type de clavier virtuel qui peut apparaître.

Par exemple, si l'entrée doit comporter exactement cinq chiffres (comme les numéros postaux, dans certains pays), alors <input type="text" pattern="[0-9]{5}"> pourrait être adéquate. La manière dont cela sera traité dépend bien sûr de l'implémentation.