menu déroulant avec triangle/flèche?

Question

Aide de recherche pour une liste déroulante de navigation!

Il devrait ressembler à ceci: I should look like this

Mais ressemble: But looks like this

Answer 1

Je vous donne un exemple de ma mise en œuvre, mais bien sûr, vous devrez ajouter votre propre svg (ou un autre format) image de fond qui sera la flèche dont vous avez besoin, et de la position du cours de la flèche également besoin de changements:

.myClass { 
    background: url("yourPic.png"); 
    background-position: 100% 50%; 
    background-repeat: no-repeat; 
    background-color: white; 
    border-color: white; 
    color: black; 
    padding: 5px 20px 5px 10px; 
    -moz-appearance: none; 
    -webkit-appearance: none; 
} 

astuce principale est ici appearance propriété qui masquera le style par défaut de l'élément select afin qu'il puisse être remplacé par vos propres styles.

PS. Pour que cela fonctionne dans IE, vous devrez ajouter ceci:

.myClass::-ms-expand { 
    display:none; 
}