change the color of the arrow in select box

Question

I want to change the color of the select box from white to purple I change the color of the select box but changed only the text not the arrow.I want to change the color of the arrow.I want to change the arrow color to the border color(purple)

 .views-widget select { border:1px solid #9b8aa8; background-color: #8b3ca8; color:#9b8aa8; height:30px; font-size:10pt; width: 199px; margin-left: 13px; padding: 0 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .views-widget { width: 199px; position: relative; } .views-widget::before { content: ''; display: block; border: 5px solid transparent; border-top-color: #fff; position: absolute; right: 0px; top: calc(50% - 2px); } 

 <div class="views-widget"> <select id="edit-field-perspective-menu-tid" name="field_perspective_menu_tid" class="form-select"> <option value="All" selected="selected">-Success Stories-</option> <option value="1">Blogs</option> <option value="2">Case Studies</option> <option value="3">Videos</option> <option value="4">White Papers</option> </select> </div> 

Answer 1

I have added some css to help you achieve what you want. You can play around with css to get desired result.

 select { /* make arrow and background */ background: linear-gradient(45deg, transparent 50%, blue 50%), linear-gradient(135deg, blue 50%, transparent 50%), linear-gradient(to right, skyblue, skyblue); background-position: calc(100% - 21px) calc(1em + 2px), calc(100% - 16px) calc(1em + 2px), 100% 0; background-size: 5px 5px, 5px 5px, 2.5em 2.5em; background-repeat: no-repeat; /* styling and reset */ border: thin solid blue; font: 300 1em/100% "Helvetica Neue", Arial, sans-serif; line-height: 1.5em; padding: 0.5em 3.5em 0.5em 1em; /* reset */ border-radius: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance:none; -moz-appearance:none; } 

 <div class="views-widget"> <select id="edit-field-perspective-menu-tid" name="field_perspective_menu_tid" class="form-select"> <option value="All" selected="selected">-Success Stories-</option> <option value="1">Blogs</option> <option value="2">Case Studies</option> <option value="3">Videos</option> <option value="4">White Papers</option> </select> </div> 

Answer 2

  .views-widget select { border:1px solid #9b8aa8; background-color: #8b3ca8; color:#9b8aa8; height:30px; font-size:10pt; width: 199px; margin-left: 13px; padding: 0 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .views-widget { width: 199px; position: relative; } .views-widget::before { content: ''; display: block; border: 5px solid transparent; border-top-color: #3ca87b; /*change in this line color*/ position: absolute; right: 0px; top: calc(50% - 2px); } 

 <div class="views-widget"> <select id="edit-field-perspective-menu-tid" name="field_perspective_menu_tid" class="form-select"> <option value="All" selected="selected">-Success Stories-</option> <option value="1">Blogs</option> <option value="2">Case Studies</option> <option value="3">Videos</option> <option value="4">White Papers</option> </select> </div> 

Answer 3

It is not possible to do this with HTML/CSS. The colors of the select elements are Operating System specific and so cannot be changed with CSS or HTML. Javascript solutions have been developed and they're (so far) the only way to do it :)

In Firefox you can use the css background-image property together with the :checked CSS pseudo-class selector to achieve it.

option:checked, option:hover {
 color: white;
 background: #488f8f repeat url("mycolor.gif");
}

You can find a css demo with a different color on my website www.speich.net