更改选择框中箭头的颜色

Question

我想将选择框的颜色从白色更改为紫色我更改了选择框的颜色，但仅更改了文本而非箭头。我想更改颜色在arrow.I要改变箭头颜色的边框颜色（紫色）

.views-widget select { 
 
\t border:1px solid #9b8aa8; 
 
\t background-color: #8b3ca8; 
 
\t color:#9b8aa8; 
 
\t height:30px; 
 
\t font-size:10pt; 
 
\t 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 { 
 
    \t border:1px solid #9b8aa8; 
 
    \t background-color: #8b3ca8; 
 
    \t color:#9b8aa8; 
 
    \t height:30px; 
 
    \t font-size:10pt; 
 
    \t 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来做到这一点。选择元素的颜色是操作系统特定的，因此不能用CSS或HTML进行更改。 Javascript解决方案已经开发出来了，它们是迄今为止唯一的方法:)

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

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

你可以找到不同的颜色在我的网站的CSS演示www.speich.net