Puis-je masquer la zone de sélection numérique de l'entrée de numéro HTML5?

985

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">
Alan
la source
2
Pouvez-vous publier un exemple du code que vous utilisez? Une capture d'écran serait également intéressante pour que nous sachions ce que vous regardez. Je regarde <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é.
calvinf
77
Vous voyez exactement ce que je vois. J'essaie de conserver le balisage type = numéro pour m'assurer que les navigateurs mobiles affichent un clavier approprié et empêcher les flèches haut et bas d'apparaître dans les navigateurs informatiques.
Alan
3
Si vous utilisez les entrées numériques, assurez - vous d'utiliser quelque chose qui joue bien avec iOS moderne, Android et navigateurs de bureau: <input type="number" pattern="[0-9]*" inputmode="numeric">. Plus d'infos: stackoverflow.com/a/31619311/806956
Aaron Gray
1
Ce que je suggère de faire est d'écrire du balisage dans le sens <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.
Agi Hammerthief

Réponses:

1141

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)):

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 le type d'entrée = nombre (Chrome)

antonj
la source
23
Il semble que Chrome n'ait plus de problème, vous pouvez donc l'utiliser display: none;comme seule chose à l'intérieur du sélecteur
philfreo
9
Ce n'est malheureusement pas multi-navigateur, donc je vous déconseille d'utiliser type=numbersi 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.
mgol
J'ai besoin d'utiliser les attributs max=et min=sur <input>des solutions alternatives, comme celles type="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?
onode le
2
pour mémoire, Chrome a également input::-webkit-clear-buttonpour le bouton X
aldo.roman.nurena
2
En 2019, cela ne fonctionnait pas pour moi dans Firefox. Cette solution a fonctionné pour moi: stackoverflow.com/questions/45396280/…
lwitzel
431

Firefox 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:

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
<input id="test" type="number">

swehren
la source
Cela, plus la «marge: 0» de la réponse d'Antonj est ce que j'ai utilisé
Asfand Qazi
Je l'ai utilisé sans marge et semble correct (mai 2020).
croraf
359

Réponse courte:

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

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-appearancepropriété sur ces éléments est number-input. La modification de cette valeur textfieldsupprime efficacement le spinner.

input[type="number"] {
    -moz-appearance: textfield;
}

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:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
<input type="number"/>


Chrome:

Dans les versions actuelles de Chrome, la valeur par défaut (agent utilisateur) de la -webkit-appearancepropriété sur ces éléments est déjà textfield. Pour supprimer le spinner, la -webkit-appearancevaleur de la propriété doit être changée en nonesur ::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttonpseudo classes (c'est -webkit-appearance: inner-spin-buttonpar défaut).

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

Il convient de noter qu'il margin: 0est 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':

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}
Josh Crozier
la source
14
j'aime mieux cette réponse car elle comprend des informations pertinentes sur Firefox, qui, lors du développement de quelque chose, doivent être prises en compte. les réponses réservées aux
webkits
ajoutez une! important à la solution firefox.LIKE THIS ===> input [type = "number"] {-moz-apparence: textfield! important; }
sajad saderi
126

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:

<input type="text" pattern="[0-9]*" />

Un patternde \d*fonctionnera également.

team_steve
la source
5
Malgré ce qui précède, la solution vérifiée fonctionne très bien pour le problème donné, j'ai décidé de passer à cette solution, ici. Une raison est, par exemple, que le navigateur Opera affiche également les flèches, que vous devez également éviter. Deuxièmement, j'ai observé des problèmes plus importants dans Chrome 17. Là, d'une part, l'attribut «maxlen» ne semble plus fonctionner; vous pouvez y entrer autant de caractères que vous le souhaitez. En revanche, les nombres qui dépassent une certaine longueur sont simplement arrondis. Utiliser cette solution pour "juste ouvrir le pavé numérique sur un appareil iOS" semble être plus sûr pour moi.
Jan
J'ai également opté pour ces solutions, car j'avais un JS qui formait le nombre dans le champ de saisie lorsque je tapais et qui ne fonctionnait pas avec un champ numérique. Donc, celui-ci a fonctionné comme un charme.
Tokimon
19
Actuellement, cela ne fait rien sur Android, dans tous les navigateurs. Testé sur cette page de test dans le navigateur 4.2.2, Chrome 28 et Firefox 23 sur Android 4.2. Ces navigateurs affichent simplement le clavier texte standard avec ce balisage.
Rory O'Kane
3
Voici une belle solution pour Android et iOS: stackoverflow.com/a/31619311/806956
Aaron Gray
1
@AaronGray revient à la case départ: cette solution a des filateurs pour le bureau.
StrangeWill
39

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.

MERT DOĞAN
la source
17
Cette solution ne fait actuellement aucune validation dans les navigateurs comme le type=numberfait.
Pepijn
5
Le clavier du téléphone n'est pas aussi bon que le clavier numérique , bien qu'il soit bien meilleur que le clavier texte . Le clavier du téléphone comporte des lettres et des symboles non pertinents qui sont omis du clavier numérique. (Testé avec cette page sur Android 4.2.)
Rory O'Kane
16
il n'y a pas "." sur le clavier tel: - <
gion_13
1
@ RoryO'Kane Le clavier numérique a un très gros inconvénient car il refuse toute entrée qui n'est pas strictement un nombre.
Jochem Kuijpers
4
Ce n'est pas une solution, et selon les normes HTML5, c'est stupide. l'entrée [tel] est pour les numéros de téléphone, l'entrée [numéro] est pour les numéros génériques, y compris les nombres à virgule flottante. Ce n'est donc pas du tout une solution.
Vasil Popov
17

Ajoutez seulement ce css pour supprimer le spinner lors de la saisie du nombre

/* For Firefox */

input[type='number'] {
    -moz-appearance:textfield;
}



/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
Sanjib Debnath
la source
selon caniuse 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 ??
oldboy
8

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:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

DOM fantôme de l'entrée [type = "number"

Et selon ces informations, vous pouvez rédiger du CSS pour masquer les éléments indésirables, comme l'a dit @Josh.

Xiao Hanyu
la source
3

Pas ce que vous avez demandé, mais je le fais à cause d'un bogue de focus dans WebKit avec des boîtes à images:

// 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 avec ce dont vous avez besoin.

Gaurav
la source
Ce n'est pas exactement ce dont je parlais, mais en raison du manque actuel de standardisation de HTML5, c'est la meilleure solution présentée. Fournir un site différent pour le mobile que pour le bureau (quelle que soit la façon dont il est implémenté) semble être le seul moyen d'y parvenir actuellement. J'ai cependant dû créer une copie de l'élément et changer la valeur du 'type' avant de l'ajouter au DOM. Depuis IE ne permet pas de modifier le type d'une entrée une fois que l'élément a été ajouté au dom.
Alan
3

C'est une meilleure réponse que je voudrais suggérer en passant la souris dessus et sans la souris dessus

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }
Swap-IOS-Android
la source
que fait- margin: 0on? De plus, les spin-buttonpseudo-éléments ne semblent pas être déclenchés par hoverde nouveaux navigateurs?
oldboy
2

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é.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

J'ai toujours du mal à trouver une solution pour Opera également.

luckychii
la source
2

Sur Firefox pour Ubuntu, en utilisant simplement

    input[type='number'] {
    -moz-appearance:textfield;
}

a fait l'affaire pour moi.

Ajouter

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Me conduirait à

Pseudo-classe ou pseudo-élément inconnu '-webkit-external-spin-button'. Le jeu de règles a été ignoré en raison d'un mauvais sélecteur.

à chaque fois que j'essayais. Idem pour le bouton rotatif intérieur.

Sonny boy
la source
1
-webkit-*est pour Chrome, -moz-*est pour Mozilla Firefox. Voilà pourquoi cela n'a pas fonctionné pour vous.
Gusstavv Gil
2

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">

Prince Sharma
la source
6
Cette réponse a déjà été donnée plusieurs fois. Il est utile de lire les réponses existantes avant d'en fournir une nouvelle, au cas où la nouvelle serait une copie.
Dan Dascalescu
1

Peut-être changer l'entrée numérique avec javascript en entrée de texte lorsque vous ne voulez pas de spinner;

document.getElementById('myinput').type = 'text';

et empêcher l'utilisateur de saisir du texte;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

demandez ensuite au javascript de le modifier au cas où vous voudriez un spinner;

document.getElementById('myinput').type = 'number';

cela a bien fonctionné pour mes fins

user3121518
la source
1

Dans les navigateurs WebKit et Blink et tous les types de navigateurs, utilisez le CSS suivant:

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
Sabbir Hossen Chowdhury
la source
Sur quels navigateurs cela fonctionnera-t-il étant donné l'utilisation de 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.
Jason Aller
0

J'avais besoin de ça pour travailler

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

La ligne supplémentaire de appearance: noneétait la clé pour moi.

Vic
la source