Javascript 将鼠标悬停在列表上时更改下拉列表颜色 挑选 澳大利亚 加拿大 英国 联系人姓名

此代码用于根据城市更改产品。但当我应用引导时，一个下拉列表显示了悬停时的默认颜色（蓝色）。我想更改悬停时的下拉列表颜色。

这里的问题是更改悬停时的引导下拉项目背景颜色，您需要做的是覆盖现有的css类。下拉项目：悬停

<form name="form" method="" action="">
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="search-category-container">
                <label class="styled-select">
                    <select name="dep" class="dropdown-product drop-select">
                        <option>Select</option>
                        <option>Australia</option>
                        <option>Canada</option>
                        <option>UK</option>
                     </select>
                </label>
            </div>
        </div> 
        <div class="col-md-7 col-sm-6">
            <div class="search-category-container">
                <label class="styled-select">
                    <select name="cname" class="dropdown-product drop-select">
                        <option>Contact name</option>
                    </select>
                </label>
            </div>
        </div>
        <div class="col-md-1 col-sm-6">
            <button type="button" class="btn btn-search-icon"><i class="ti-search"></i></button>
        </div>
    </div>

---

如果要更改箭头颜色和文字，请尝试以下操作：

.styled选择{
背景：透明；
宽度：168px；
填充物：5px；
字体大小：16px；
线高：1；
边界：0；
边界半径：0；
高度：34px；
-webkit外观：无；
边框：1px纯色灰色；
}
.styled选择：悬停{
大纲：无；
宽度：140px；
高度：34px；
溢出：隐藏；
背景：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Vector_down_arrow_changed.svg/16px-Vector_down_arrow_changed.svg.png）无重复权#fff；
}
挑选{
大纲：无；
}
。拖放选择：悬停{
颜色：绿色！重要；
}
选择权{
颜色：绿色！重要；
}

挑选
澳大利亚
加拿大
英国
联系人姓名

.dropdown-item:hover {
   background-color: red!important;
}