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

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

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;
}

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

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.

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>

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

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

<input id="test" type="number">

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.

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.

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; }

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.

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

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;
}

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.