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

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

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

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

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

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.

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.

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

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>

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

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.

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

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.

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.

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

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

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.

J'ai trouvé une solution super simple en utilisant

<input type="text" inputmode="numeric" />

Ceci est pris en charge par la plupart des navigateurs: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode