更改选择框中箭头的颜色

Question

我要将选择框的颜色从白色更改为紫色我要更改选择框的颜色，但只更改文本而不是箭头。我想更改箭头的颜色。我想将箭头的颜色更改为边框颜色（紫色）

 .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

我添加了一些CSS，以帮助您实现所需的功能。 您可以使用css来获得所需的结果。

 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

使用HTML / CSS不可能做到这一点。 select元素的颜色是特定于操作系统的，因此不能使用CSS或HTML进行更改。 已经开发了Javascript解决方案，并且（到目前为止）它们是唯一的方法：）

在Firefox中，您可以将css background-image属性与：checked CSS伪类选择器一起使用来实现它。

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

您可以在我的网站www.speich.net上找到具有不同颜色的CSS演示。