Puis-je cacher la boîte de spin de l'entrée du numéro HTML5?

y a-t-il un moyen cohérent entre les navigateurs pour masquer les nouvelles boîtes de spin que certains navigateurs (comme Chrome) rendent pour l'entrée HTML de numéro de type? Je cherche une méthode CSS ou JavaScript pour empêcher les flèches Haut/Bas d'apparaître.

<input id="test" type="number">
743
demandé sur Sebas 2010-09-25 00:58:22
la source

14 ответов

ce CSS cache efficacement le bouton spin 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 */
}

vous pouvez toujours utiliser l'inspector (webkit, peut-être Firebug pour Firefox) pour rechercher les propriétés CSS correspondant aux éléments qui vous intéressent, cherchez des Pseudo-éléments. Cette image affiche les résultats pour un type d'élément d'entrée= "number":

Inspector for input type=number (Chrome)

831
répondu antonj 2018-06-23 01:53:35
la source

Firefox 29 ajoute actuellement la prise en charge des éléments de nombre, donc voici un extrait pour cacher les spinners dans les navigateurs webkit et moz basés:

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
<input id="test" type="number">
368
répondu swehren 2018-03-27 13:12:29
la source

brève réponse:

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" />

plus longue réponse:

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 est number-input . Le fait de changer cela à la valeur textfield supprime effectivement la broche.

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

dans certains cas, vous pouvez vouloir que le fileur soit caché initialement , puis apparaître sur le hover/focus. (C'est actuellement le comportement par défaut dans Chrome). Si c'est le cas, vous pouvez utiliser ce qui suit:

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) du -webkit-appearance propriété sur ces éléments est déjà textfield . Pour supprimer le filateur, la valeur de la propriété -webkit-appearance doit être changée en none sur les pseudo classes ::-webkit-outer-spin-button / ::-webkit-inner-spin-button (il est -webkit-appearance: inner-spin-button par 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 est intéressant de souligner que margin: 0 est utilisé pour supprimer la marge dans Vieux versions de Chrome.

actuellement, au moment d'écrire ceci, voici le style par défaut de l'agent utilisateur sur 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;
}
300
répondu Josh Crozier 2015-01-14 06:40:12
la source

selon 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 pattern de \d* .

117
répondu team_steve 2013-08-16 02:22:11
la source

essayez d'utiliser input type="tel" à la place. Il affiche un clavier avec des nombres, et il ne montre pas des cases. Il ne nécessite pas de JavaScript ou CSS ou plugins ou autre chose.

38
répondu MERT DOĞAN 2018-06-06 12:36:42
la source

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 - > Settings -> General -> Elements -> Show user agent shadow DOM "

alors vous pouvez voir tous éléments DOM ombragés , par exemple , pour <input type="number"> , l'élément complet avec DOM shadowed 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>

shadow DOM of input[type="number"

et selon ces informations, vous pouvez rédiger quelques CSS pour cacher des éléments indésirables, comme @Josh l'a dit.

8
répondu Xiao Hanyu 2015-12-30 14:30:04
la source

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">
4
répondu Prince Sharma 2018-03-27 13:11:24
la source

ce n'est pas ce que vous avez demandé, mais je le fais à cause d'un bug de focus dans WebKit avec spinboxes:

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

3
répondu Gaurav 2010-10-08 15:10:33
la source

Sur Firefox pour Ubuntu, en utilisant seulement

    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 mènerait à

Inconnu pseudo-classe ou pseudo-élément "- webkit-externe-spin-bouton". Les règles sont ignorées à cause d'un mauvais sélecteur.

à chaque fois que j'ai essayé. Idem pour le bouton spin interne.

2
répondu sonny_boy 2016-11-19 00:16:28
la source

C'est une meilleure réponse que je voudrais suggérer sur mouse over et sans mouse over

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; }
2
répondu Swap-IOS-Android 2017-09-22 12:20:48
la source

pour faire ce travail en Safari j'ai trouvé ajouter !important pour le réglage du webkit force le bouton spin à ê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 encore du mal à trouver une solution pour L'Opéra.

1
répondu luckychii 2014-07-03 04:45:00
la source

peut-être changer le numéro d'entrée avec javascript en entrée de texte quand vous ne voulez pas d'un spinner;

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

et d'empêcher l'utilisateur d'entrer 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;
      }
  }

alors faites-le changer par javascript au cas où vous voulez un spinner;

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

il a bien fonctionné pour mes fins

1
répondu user3121518 2016-09-26 15:44:12
la source

ajouter seulement ce css pour supprimer le fileur à l'entrée du numéro

/* 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;
}
1
répondu Sanjib Debnath 2018-08-08 12:51:06
la source

je sais que cette question a été répondue et est ancienne mais laissez-moi ajouter un peu. Les réponses ci-dessus (se référant à la réponse de @swehren) sont correctes mais lorsque la saisie est désactivée, vous pouvez toujours taper des caractères alphanumériques.

0
répondu Jeff Yan 2018-06-18 10:57:05
la source

Autres questions sur