web-dev-qa-db-fra.com

Changer la couleur et l'apparence de la flèche déroulante

Je souhaite modifier l'apparence par défaut de la flèche d'une liste déroulante afin qu'elle soit identique pour tous les navigateurs. Existe-t-il un moyen de remplacer l'apparence par défaut de la flèche déroulante en utilisant CSS ou autrement?

cssdrop-down-menu
63
Iris

Vous pouvez y parvenir avec CSS, mais vous ne modifiez pas techniquement la flèche elle-même.

Dans cet exemple, je cache la flèche par défaut et affiche ma propre flèche à la place.

HTML:

<div class="styleSelect">
  <select class="units">
    <option value="Metres">Metres</option>
    <option value="Feet">Feet</option>
    <option value="Fathoms">Fathoms</option>
  </select>
</div>

CSS:

.styleSelect select {
  background: transparent;
  width: 168px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  color: #000;
}

.styleSelect {
  width: 140px;
  height: 34px;
  overflow: hidden;
  background: url("images/downArrow.png") no-repeat right #fff;
  border: 2px solid #000;
}
49
Sphvn

Non, la personnalisation de formulaires entre navigateurs est très difficile, voire impossible, pour tous les navigateurs. Si vous vous souciez vraiment de l'apparence de ces widgets, vous devriez utiliser une implémentation javascript.

voir http://www.456bereastreet.com/archive/200409/styling_form_controls/ et http://developer.yahoo.com/yui/examples/button/btn_example07.html

19
TomHastjarjanto

Cela peut être fait par:

select{
  background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
}


select{
  background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
  
  
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    appearance: none;
    outline-width: 0;
    
    padding: 10px 10px 10px 5px;
    display: block;
    width: 10em;
    border: none;
    font-size: 1rem;
    
    border-bottom: 1px solid #757575;
  }
<div class="styleSelect">
  <select class="units">
    <option value="Metres">Metres</option>
    <option value="Feet">Feet</option>
    <option value="Fathoms">Fathoms</option>
  </select>
</div>

10
Lambder

L'élément <select> est généré par l'application et le style ne fait pas partie des spécifications CSS/HTML.

Vous devrez le simuler avec votre propre DIV et le superposer au précédent, ou créer votre propre contrôle en émulant les mêmes fonctionnalités.

4
Diodeus - James MacFarlane

Non, vous ne pouvez pas le faire en utilisant un <select> réel, mais certaines techniques vous permettent de les "remplacer" par des solutions javascript plus esthétiques.

Voici un bon article sur le sujet: <select> Something New

1
Chad Birch

Pas facile à faire, j'ai peur. Le problème est Css ne peut pas remplacer la flèche dans une sélection car cela est rendu par le navigateur. Mais vous pouvez créer un nouveau contrôle à partir d’éléments div et d’entrée et de Javascript pour exécuter la même fonction que celle de select. 

Essayez de regarder quelques-uns des plugins autocomplete pour Jquery par exemple.

Sinon, il y a quelques informations sur l'élément select ici:

http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/

1
Richard

Nous avons utilisé YUI, Chosen et utilisons actuellement le plugin jQuery Select2: https://select2.github.io/

C'est assez robuste, la flèche n'est que la pointe de l'iceberg.

Dès que le choix stylisé devient une exigence, je suis d'accord avec les autres, optez pour un plugin. Ne vous tuez pas en réinventant la roue.

1
sb333

Essayez de changer la couleur de votre attribut "border-top" en blanc

0
Bojan

Sauf si vous envisagez de créer votre propre liste déroulante (et de ne pas utiliser une liste déroulante de bibliothèques standard), vous êtes bloqué. L'aspect du contrôle DDL sera basé sur le système que vous exécutez et/ou le navigateur qui affiche la sortie.

0
TheTXI