Puis-je cacher le HTML5 nombre d'entrée de la zone de sélection numérique?

Cette CSS masque efficacement les spin-bouton pour les navigateurs webkit (l'ai testé sur Chrome 7.0.517.44 et Safari 5.0.2 (6533.18.5)):

CSS:

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 */
}

HTML:

<input type="number" step="0.01" />

Vous pouvez toujours utiliser l'inspecteur (webkit, éventuellement Firebug pour Firefox) pour regarder sur la correspondance de propriétés CSS pour les éléments qui vous intéressent, regardez pour les Pseudo-éléments. Cette image montre les résultats d'un élément input type="number":

Réponse courte:

CSS:

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

HTML:

<input type="number" />

Plus réponse:

À ajouter à la réponse existant...

Firefox:

Dans les versions actuelles de Firefox, l' (agent utilisateur) valeur par défaut de la -moz-appearance de la propriété sur ces éléments est number-input. Changer la valeur textfield élimine efficacement les spinner.

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

Dans certains cas, vous pouvez le cône à être caché initialement, et apparaissent alors sur le vol stationnaire/focus. (C'est le comportement par défaut dans google Chrome). Si oui, vous pouvez utiliser les éléments suivants:

CSS:

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

HTML:

<input type="number"/>

---

Chrome:

Dans les dernières versions de Chrome, le (agent utilisateur) valeur par défaut de la -webkit-appearance de la propriété sur ces éléments est déjà textfield. Afin de supprimer le compteur, le -webkit-appearance valeur de la propriété doit être modifié pour none sur le ::-webkit-outer-spin-button/::-webkit-inner-spin-button pseudo-classes (c'est -webkit-appearance: inner-spin-button par défaut).

CSS:

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

HTML:

<input type="number" />

Il est intéressant de souligner que margin: 0 est utilisé pour supprimer la marge dans âgées versions de Chrome.

Actuellement, comme de l'écriture, ici est la valeur par défaut de l'agent utilisateur de style sur le "inner-spin-bouton" pseudo-classe:

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

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 des 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 chrome ombre-racine de fonction par "DevTools -> Paramètres -> Général> Éléments -> Afficher le nom d'utilisateur de l'agent de l'ombre DOM"

Ensuite, vous pouvez voir tous les l'ombre des éléments du DOM, par exemple, pour <input type="number">, la totalité de l'élément avec l'ombre DOM est:

HTML:

<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 préparer un peu de CSS pour masquer les éléments indésirables, tout comme @Josh dit.

C'est la plus meilleure réponse que je voudrais suggérer au survol de la souris et souris sans fil

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

Sur Firefox pour Ubuntu, en utilisant seulement

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

a fait le tour pour moi.

Ajoutant

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

Me conduirait à

Inconnu pseudo-classe ou pseudo-élément "- webkit-externe-spin-bouton".
Jeu de règles ignoré en raison du mauvais sélecteur.

chaque fois que j'ai essayé. De même pour l'intérieur bouton spin.

Peut-être modifier le nombre d'entrée avec javascript pour la saisie de texte lorsque vous ne voulez pas un spinner;

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

et à 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 le javascript de modifier à nouveau le cas où vous souhaitez un spinner;

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

il a bien fonctionné pour mes fins