選択したドロップダウン矢印で背景色を変更できますか？

Question

フォーム上で選択を使用する場合、矢印が右側にある背景色を変更する方法はありますか？また、矢印自体の色も変更できますか？私はブートストラップの最新の安定版を使っていますが、何かが組み込まれているのか、これを行うことができるCSSがあるのか​​分かりません。 CSSスタイルのために次にhttps://codepen.io/bephf/pen/ogNBYW

<div class="select-style"> 
    <select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
    </select> 
</div> 

：私は、私はこのページで解決策を見つけたImは

Answer 1

にそれを変更しようとするもの、それは今のように見えると何の画像を添付

.select-style { 
    padding: 0; 
    margin: 0; 
    border: 1px solid #ccc; 
    width: 120px; 
    border-radius: 3px; 
    overflow: hidden; 
    background-color: #fff; 

    background: #fff url("path to arrow image") no-repeat 90% 50%; 
} 

.select-style select { 
    padding: 5px 8px; 
    width: 130%; 
    border: none; 
    box-shadow: none; 
    background-color: transparent; 
    background-image: none; 
    -webkit-appearance: none; 
     -moz-appearance: none; 
      appearance: none; 
} 

.select-style select:focus { 
    outline: none; 
} 

Answer 2

カスタムの通常の矢印をブロックする必要があります。あなたの選択のためのСolors））

問題を知っています：カスタムメニューの矢印をクリックすると表示されません。私は少しJS

.select-style { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 1px solid #ccc; 
 
    width: 120px; 
 
    border-radius: 3px; 
 
    overflow: hidden; 
 
    background-color: #fff; 
 
    background: #fff url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%; 
 
} 
 

 
.select-style select { 
 
    padding: 5px 8px; 
 
    width: 130%; 
 
    border: none; 
 
    box-shadow: none; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
} 
 

 
.select-style select:focus { 
 
    outline: none; 
 
} 
 

 
.select-style { 
 
    position: relative; 
 
} 
 

 
.arrow { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    z-index: 100; 
 
    background-color: red; 
 
    color: blue; 
 
    line-height: 2; 
 
} 
 

 
.select-style:hover .arrow { 
 
    color: lightblue; 
 
}

<div class="select-style"> 
 
    <select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    </select> 
 
    <div class="arrow">&#9660;</div> 
 
</div>

が必要になります