CODEWITHSUNDEEP
htmlcsswebkit-appearance
pieterbesje
pieterbesje

Reputation: 69

-Webkit-appearance: menulist, color change

Can you change the color of the arrow (menulist). I'm not able to change the color of it, can anyone help me with this?

HTML

 <select class="drop_down_menu">
 <option>Yolanda van der Kamp</option>
 <option>Bernard Vogels</option>
 <option>Stefan Janssen</option>
 <option>Maik de Boer</option>
 </select>

CSS

.drop_down_menu{
background-color:#eaeaea;
border: 1px solid #dbdbdb;
color:#104c64;
-webkit-appearance:menulist;
}

Upvotes: 2

Views: 2285

Answers (1)

Nick Panov
Nick Panov

Reputation: 2737

Yes you can, with css appearance. Mind that IE doesn't support appearance in which case you will need to get hacky.

.drop_down_menu{
appearance:listbox; //mind browser-specific properties;
}
.drow_down_menu:before{
content : "\someglyph"; //add glyph or image as background;
position:absolute; //and wherever you want to place it.
}

And now to get hacky for the IE just create a wrapper around the select and then set select with 

width:120%;

Upvotes: 0

Related Questions