更改選擇框中箭頭的顏色

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演示。