選択ボックス内の矢印の色を変更します

Question

選択ボックスの色を白から紫に変更したい選択ボックスの色を変更しますが、矢印ではなくテキストのみを変更しました。色を変更したいarrow.Iは、私はあなたが望むものを達成するためにいくつかのCSSを追加した境界線の色（紫）

.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で遊ぶことができます。

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でこれを行うことはできません。 select要素の色はオペレーティングシステム固有のものなので、CSSやHTMLでは変更できません。 JavaScriptのソリューションが開発されましたが、これまでのところ唯一の方法です。

Firefoxでは、CSSのbackground-imageプロパティをwith：checked CSS擬似クラスセレクタと組み合わせて使用​​できます。

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

あなたは私のウェブサイト上に異なる色でCSSのデモを見つけることができますwww.speich.net

[色を変更し、ドロップダウン矢印の外観]（の