将鼠标悬停在列表上时更改下拉列表颜色

Question

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

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

Answer 1

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

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

Answer 2

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

＆＃13;

＆＃13;

.styled-select select {
  background: transparent;
  width: 168px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  border: 1px solid gray;
}

.styled-select:hover {
  outline: none;
  width: 140px;
  height: 34px;
  overflow: hidden;
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Vector_down_arrow_changed.svg/16px-Vector_down_arrow_changed.svg.png") no-repeat right #fff;
}

select {
  outline: none;
}

.drop-select:hover  {
  color: green !important;
}

option {
  color: green !important;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;