web-dev-qa-db-fra.com

Supprimer la flèche déroulante Datalist dans Chrome

Chrome a apparemment ajouté une flèche déroulante aux entrées de texte qui font référence à un <datalist>. Il apparaît dans Chrome 34 (Canary) mais pas dans la version stable actuelle (Chrome 31).

Il apparaît uniquement lorsque le champ de texte est focalisé (voir mise à jour) et est appliqué aux deux types d'entrée text et search.

Cela pourrait être pire en ce qui concerne les implémentations de navigateur natives, mais comme vous pouvez le voir sur l'image, cela entre en conflit avec mes spécifications de conception.

enter image description here

Quelqu'un sait-il comment supprimer ou remplacer cette nouvelle fonctionnalité?

<datalist id="list"><option value="foo"><option value="bar"></datalist>
<input type="text" list="list" name="field" maxlength="50" autocomplete="off" spellcheck="off" placeholder="Jump To">

Mise à jour:

La flèche apparaît également lorsque le champ est survolé (pas seulement focalisé) et a malheureusement aussi sa propre couleur d'arrière-plan lorsque le bouton lui-même est survolé:

enter image description here

htmlcsshtml5google-chrome
45
cantera

Merci au commentaire de alexander farkas , voici la règle de style pour supprimer la flèche:

input::-webkit-calendar-picker-indicator {
  display: none;
}
85
cantera

Merci à Cantera. Je ne voulais pas me débarrasser complètement de la flèche noire, juste du carré gris qui l'entoure.

input::-webkit-calendar-picker-indicator {
  background-color: inherit;
  }
7
Toby Belch
input::-webkit-calendar-picker-indicator {
  opacity: 0;
}

J'ai également supprimé la flèche et j'ai trouvé une meilleure expérience de clic pour toujours cliquer où la flèche serait, vous pouvez même augmenter la largeur et la hauteur de celle-ci> 1em et dans l'entrée, peut-être mettre une flèche personnalisée comme image d'arrière-plan, où serait la flèche.

3
dmartins

Comme d'autres l'ont mentionné ::-webkit-calendar-picker-indicator { display: none } supprime la flèche, cela aurait également un impact sur le sélecteur de date html5 sur un <input type="date">,

Supprimer juste supprimer l'entrée de la base de données serait:

[list]::-webkit-calendar-picker-indicator { display: none; }

2
jnowland