Existe-t-il un moyen cohérent entre les navigateurs de masquer les nouvelles zones de sélection numérique que certains navigateurs (tels que Chrome) affichent pour l'entrée HTML du numéro de type? Je recherche une méthode CSS ou JavaScript pour empêcher les flèches haut / bas d'apparaître.
<input id="test" type="number">
<input type="number" min="4" max="8" />
dans Chrome et je vois un champ de saisie typique avec des flèches haut et bas sur le côté.<input type="number" pattern="[0-9]*" inputmode="numeric">
. Plus d'infos: stackoverflow.com/a/31619311/806956<input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... >
et d'utiliser jQuery Validati ou similaire pour gérer la validation. Je n'ai pas testé cette approche, c'est pourquoi il s'agit d'un commentaire plutôt que d'une réponse.Réponses:
Ce CSS masque efficacement le bouton rotatif pour les navigateurs webkit (l'ont testé dans Chrome 7.0.517.44 et Safari version 5.0.2 (6533.18.5)):
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":
la source
display: none;
comme seule chose à l'intérieur du sélecteurtype=number
si vous devez masquer ces flèches. Par exemple, ils seraient toujours affichés dans Opera et ils commenceront à être affichés dans Firefox, IE, etc. lorsqu'ils implémentent ce type d'entrée.max=
etmin=
sur<input>
des solutions alternatives, comme cellestype="text"
qui ne sont pas valides HTML5. Les gens mentionnent également Opera, y compris ces filateurs. Existe-t-il une solution pour Opera similaire à Safari / Chrome?input::-webkit-clear-button
pour le bouton XFirefox 29 ajoute actuellement la prise en charge des éléments numériques, alors voici un extrait pour masquer les filateurs dans les navigateurs Webkit et moz:
la source
Réponse courte:
Réponse plus longue:
Pour ajouter à la réponse existante ...
Firefox:
Dans les versions actuelles de Firefox, la valeur par défaut (agent utilisateur) de la
-moz-appearance
propriété sur ces éléments estnumber-input
. La modification de cette valeurtextfield
supprime efficacement le spinner.Dans certains cas, vous souhaiterez peut-être que le spinner soit initialement masqué , puis apparaisse en survol / focus. (Il s'agit actuellement du comportement par défaut dans Chrome). Si oui, vous pouvez utiliser les éléments suivants:
Chrome:
Dans les versions actuelles de Chrome, la valeur par défaut (agent utilisateur) de la
-webkit-appearance
propriété sur ces éléments est déjàtextfield
. Pour supprimer le spinner, la-webkit-appearance
valeur de la propriété doit être changée ennone
sur::-webkit-outer-spin-button
/::-webkit-inner-spin-button
pseudo classes (c'est-webkit-appearance: inner-spin-button
par défaut).Il convient de noter qu'il
margin: 0
est utilisé pour supprimer la marge dans les anciennes versions de Chrome.Actuellement, au moment de la rédaction de ce document, voici le style d'agent utilisateur par défaut dans la pseudo-classe 'inner-spin-button':
la source
Selon le guide de codage de l'expérience utilisateur d' Apple pour Safari mobile , vous pouvez utiliser ce qui suit pour afficher un clavier numérique dans le navigateur iPhone:
Un
pattern
de\d*
fonctionnera également.la source
Essayez d'utiliser à la
input type="tel"
place. Il affiche un clavier avec des chiffres et n'affiche pas de zones de sélection numérique. Il ne nécessite ni JavaScript, ni CSS, ni plugins, ni rien d'autre.la source
type=number
fait.Ajoutez seulement ce css pour supprimer le spinner lors de la saisie du nombre
la source
input[type=number]{ -webkit-appearance }
devrait être suffisant pour le chrome, mais bien sûr, vous devez également modifier les pseudo-éléments. une idée pourquoi ??J'ai rencontré ce problème avec un
input[type="datetime-local"]
, qui est similaire à ce problème.Et j'ai trouvé un moyen de surmonter ce genre de problèmes.
Tout d'abord, vous devez activer la fonction shadow-root de Chrome par "DevTools -> Paramètres -> Général -> Éléments -> Afficher le DOM shadow de l'agent utilisateur"
Ensuite, vous pouvez voir tous les éléments DOM ombrés , par exemple, pour
<input type="number">
, l'élément complet avec DOM ombré est:Et selon ces informations, vous pouvez rédiger du CSS pour masquer les éléments indésirables, comme l'a dit @Josh.
la source
Pas ce que vous avez demandé, mais je le fais à cause d'un bogue de focus dans WebKit avec des boîtes à images:
Cela pourrait vous donner une idée pour vous aider avec ce dont vous avez besoin.
la source
C'est une meilleure réponse que je voudrais suggérer en passant la souris dessus et sans la souris dessus
la source
margin: 0
on? De plus, lesspin-button
pseudo-éléments ne semblent pas être déclenchés parhover
de nouveaux navigateurs?Pour que cela fonctionne dans Safari, j'ai trouvé que l'ajout de! Important à l'ajustement du kit Web force le bouton de rotation à être caché.
J'ai toujours du mal à trouver une solution pour Opera également.
la source
Sur Firefox pour Ubuntu, en utilisant simplement
a fait l'affaire pour moi.
Ajouter
Me conduirait à
à chaque fois que j'essayais. Idem pour le bouton rotatif intérieur.
la source
-webkit-*
est pour Chrome,-moz-*
est pour Mozilla Firefox. Voilà pourquoi cela n'a pas fonctionné pour vous.la source
Peut-être changer l'entrée numérique avec javascript en entrée de texte lorsque vous ne voulez pas de spinner;
et empêcher l'utilisateur de saisir du texte;
demandez ensuite au javascript de le modifier au cas où vous voudriez un spinner;
cela a bien fonctionné pour mes fins
la source
Dans les navigateurs WebKit et Blink et tous les types de navigateurs, utilisez le CSS suivant:
la source
webkit
? Lorsque vous répondez à une question de neuf ans avec quatorze réponses existantes, il est important d'ajouter des explications sur le fonctionnement et la raison de votre réponse et de mentionner le nouvel aspect de la question auquel elle répond.J'avais besoin de ça pour travailler
La ligne supplémentaire de
appearance: none
était la clé pour moi.la source
J'ai trouvé une solution super simple en utilisant
Ceci est pris en charge par la plupart des navigateurs: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
la source