2017-02-16 53 views
0

我想將選擇框的顏色從白色更改爲紫色我更改了選擇框的顏色,但僅更改了文本而非箭頭。我想更改顏色在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>

+1

[更改顏色和下拉箭頭的外觀(的可能的複製http://stackoverflow.com/問題/ 611482 /變化顏色和外觀的-下拉箭頭) –

回答

2

我增加了一些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>

0

.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>

0

這是不可能的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