web-dev-qa-db-fra.com

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

Je cherche seulement à supprimer ces flèches, pratique dans certaines situations.

Je voudrais cependant garder le navigateur conscient du fait que le contenu est purement numérique. Donc, le changer en input[type="text"] n'est pas une solution acceptable.

Maintenant que Opera est basé sur le Webkit, cette question est une question de: Puis-je masquer la zone de saisie du numéro HTML5?

csshtml5formsinputopera
111
anthonyryan1

J'utilise des CSS simples et il 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 explique en détail et montre également comment les styliser

273
JayD

Ces flèches font partie de Shadow DOM , qui sont essentiellement des éléments DOM de votre page qui vous sont cachés. Si vous débutez dans cette idée, lancez une bonne introduction disponible ici .

Pour la plupart, le DOM Shadow nous fait gagner du temps et est bon. Mais il existe des cas, comme cette question, où vous souhaitez la modifier.

Vous pouvez les modifier dans Webkit maintenant avec les bons sélecteurs , mais cela n’en est encore qu’à ses débuts. Le DOM Shadow n’ayant pas encore de sélecteurs unifiés, les sélecteurs Webkit sont propriétaires (et il ne s’agit pas simplement d’ajouter -webkit, comme dans d’autres cas).

Pour cette raison, il semble probable que Opera ne soit pas encore prêt à l'ajouter. Rechercher des ressources sur Opera Les modifications du DOM Shadow sont toutefois difficiles. Quelques sources Internet peu fiables J'ai trouvé tous disent ou suggère que Opera ne supporte pas actuellement la manipulation du DOM Shadow.

J'ai passé un peu de temps à parcourir le site Web Opera pour voir s'il en serait fait mention, en plus d'essayer de les trouver dans Dragonfly ... aucune recherche n'a eu de chance. 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, du moins pour le moment.

14
jamesplease

Il n'y a pas moyen.

Cette question est fondamentalement une copie de Y a-t-il un moyen de masquer les nouveaux contrôles de la boîte de sélection HTML5 affichés dans Google Chrome et Opera? mais peut-être pas une copie complète, car la motivation est donnée .

Si le but est de "sensibiliser le navigateur au contenu purement numérique", vous devez envisager ce que cela signifierait vraiment. Les flèches, ou spinners, contribuent à rendre l’entrée numérique plus confortable dans certains cas. Une autre partie consiste à vérifier que le contenu est un nombre valide. Sur les navigateurs prenant en charge les améliorations d’entrée HTML5, vous pourrez peut-être utiliser l’attribut pattern. Cet attribut peut également affecter une troisième fonctionnalité d’entrée, à savoir le type de clavier virtuel susceptible d’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équat. La manière dont cela sera traité dépend évidemment de la mise en œuvre.

11
Jukka K. Korpela