web-dev-qa-db-fra.com

Puis-je masquer la zone de sélection numérique du numéro HTML5?

Existe-t-il un moyen cohérent, dans les navigateurs, de masquer les nouvelles boîtes de sélection que certains navigateurs (telles que Chrome) rendent pour une entrée HTML de type? Je recherche une méthode CSS ou JavaScript pour empêcher l’apparition des flèches haut/bas.

<input id="test" type="number">
javascriptcsshtml5inputnumbers
786
Alan

Ce CSS masque efficacement le bouton de navigation des navigateurs Web (il a été testé sous 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 des propriétés CSS correspondantes pour les éléments qui vous intéressent, recherchez des pseudo-éléments. Cette image montre les résultats pour un élément d’entrée type = "nombre":

Inspector for input type=number (Chrome)

883
antonj

Firefox 29 ajoute actuellement un support pour les éléments numériques, alors voici un extrait pour cacher 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">

392
swehren

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 propriété -moz-appearance sur ces éléments est number-input. Changer cela en la valeur textfield supprime efficacement le cône.

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

Dans certains cas, vous voudrez peut-être que la roulette soit cachée initialement, puis apparaisse au survol/focus. (Ceci est actuellement le 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 propriété -webkit-appearance sur ces éléments est déjà textfield. Pour supprimer le spinner, vous devez modifier la valeur de la propriété -webkit-appearance en none dans les pseudo-classes ::-webkit-outer-spin-button::-webkit-inner-spin-button (il s'agit de -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 noter que margin: 0 est utilisé pour supprimer la marge dans les _/anciennes versions de Chrome.

Actuellement, au moment d'écrire ceci, voici le style de l'agent utilisateur par défaut 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;
}
323
Josh Crozier

Selon le guide de codage d’expérience utilisateur de Apple pour Safari mobile , vous pouvez utiliser ce qui suit pour afficher un clavier numérique dans le navigateur de l’iPhone:

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

Une pattern de \d* fonctionnera également.

119
team_steve

Essayez d'utiliser input type="tel" à la place. Un clavier avec des chiffres s’affiche, mais il ne montre pas les boîtes à effets Il ne nécessite aucun JavaScript ou CSS, plugins ou quoi que ce soit d'autre.

37
MERT DOĞAN

Ajoutez ce css uniquement pour supprimer 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;
}
9
Sanjib Debnath

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 de root shadow de Chrome par "Outils de développement -> Paramètres -> Général -> Éléments -> Afficher le DOM de l’ombre de l’agent utilisateur"

Ensuite, vous pouvez voir tous les shadowed éléments DOM, par exemple, pour <input type="number">, l’élément complet avec le 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>

 shadow DOM of input[type="number"

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

8
Xiao Hanyu

C’est une meilleure réponse que je voudrais suggérer lorsque vous passez la souris sur et sans souris

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; }
3
Swap-IOS-Android

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

3
Prince Sharma

Ce n'est pas ce que vous avez demandé, mais je le fais à cause d'un bug de focus dans WebKit avec les 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
Gaurav

Sur Firefox pour Ubuntu, en utilisant simplement

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

a fait le tour 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-outer-spin-button». Le jeu de règles a été ignoré en raison d'un mauvais sélecteur.

chaque fois que j'ai essayé. Même chose pour le bouton de rotation interne.

2
sonny_boy

Pour que cela fonctionne dans Safari, je trouvais qu’ajouter! Important au réglage de la Webkit force le bouton de sélection des effets à être masqué.

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

1
luckychii

Peut-être changer le nombre entré avec javascript en entrée de texte quand vous ne voulez pas de spinner;

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

et arrêtez la saisie de texte par l'utilisateur;

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

ensuite, demandez au javascript de le changer au cas où vous voudriez un disque tournant;

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

cela a bien fonctionné pour mes besoins

1
user3121518

vous pouvez utiliser ce code simple dans votre fichier CSS:

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