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


Existe-t-il un moyen cohérent à travers les navigateurs pour masquer les nouvelles boîtes de sélection que certains navigateurs (comme Chrome) affichent pour l'entrée HTML du 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">

714
2017-09-24 20:58


origine


Réponses:


Ce CSS masque efficacement le bouton d'accès pour les navigateurs webkit (l'avez 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'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 de type input = "number":

Inspector for input type=number (Chrome)


800
2017-11-28 18:17



Firefox 29 ajoute actuellement le support pour les éléments de nombre, donc 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">


347
2018-03-21 12:45



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) du -moz-appearance propriété sur ces éléments est number-input. Changer cela à la valeur textfield supprime efficacement le fileur.

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

Dans certains cas, vous voudrez peut-être que le fileur soit caché initialement, puis apparaissent sur hover / focus. (Ceci est actuellement le comportement par défaut dans Chrome). Si oui, 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) de -webkit-appearance propriété sur ces éléments est déjà textfield. Afin d'enlever le fileur, le -webkit-appearance la valeur de la propriété doit être changée en none sur le ::-webkit-outer-spin-button/::-webkit-inner-spin-button pseudo-classes (c'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 vaut la peine de souligner que margin: 0 est utilisé pour supprimer la marge dans plus âgée versions de Chrome.

Actuellement, à l'écriture de ceci, voici le style d'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;
}

289
2018-01-14 03:34



Selon Guide de codage de l'expérience utilisateur d'Apple pour mobile Safari, 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* travaillera aussi.


118
2018-02-03 03:43



Essayez d'utiliser input type="tel" au lieu. Il affiche un clavier avec des chiffres, et il ne montre pas les boîtes de spin. Il ne nécessite pas de JavaScript ou de CSS ou de plugins ou quoi que ce soit d'autre.


38
2018-03-07 22:52



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 -> Eléments -> Afficher le DOM de l'agent utilisateur"

Ensuite, vous pouvez voir tous éléments DOM ombréspar 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>

shadow DOM of input[type="number"

Et selon ces informations, vous pouvez rédiger des CSS pour cacher les éléments indésirables, tout comme @Josh dit.


7
2017-12-30 11:30



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


4
2018-02-17 08:41