如何在 CSS 中自定义 SELECT 下拉菜单

Question

我正在尝试更改默认箭头图像，以及使用不同的背景颜色(我将整理背景颜色和图像(。我想要如下图所示的东西：示例下拉菜单。

如果可能的话，有人可以给我一些关于 CSS 编码的指示吗？

我正在使用的代码如下：

<div class="row">
  <div class="col-md-6">
    <div class="ql_box col-md-12">
      <ul>
        <li>
          <h3>Services</h3>
        </li>
        <li><a class="std_button ql_btn" style="text-align: center; font-size: 16px; padding: 13px; color: #fff;" href="#">VIEW ALL SERVICES</a></li>
        <li>
          <h4>Choose from our resources to find the right service for you.</h4>
        </li>
        <li>
          <form>
            <select>
              <option disabled selected>Choose...</option>
              <option>Retail</option>
              <option>Retail</option>
              <option>Retail</option>
              <option>Retail</option>
              <option>Retail</option>
            </select>
          </form>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-md-6">
    <div class="ql_box col-md-12">
    </div>
  </div>
</div>

Answer 1

试试这个。希望它对您有用。

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}
/* For IE10 */
select::-ms-expand {
  display: none;
}
select {
  background-image: url("https://www.pngfind.com/pngs/m/51-519470_drop-down-arrow-comments-abpi-black-triangle-hd.png");
  border: 1px solid #000;
  padding: 5px 10px 5px 10px;
  width: 200px;
  background-position: top 8px right 12px;
  background-repeat: no-repeat;
  background-size: 20px;
}

<div class="row">
  <div class="col-md-6">
    <div class="ql_box col-md-12">
      <ul>
        <li>
          <h3>Services</h3>
        </li>
        <li><a class="std_button ql_btn" style="text-align: center; font-size: 16px; padding: 13px; color: #fff;" href="#">VIEW ALL SERVICES</a></li>
        <li>
          <h4>Choose from our resources to find the right service for you.</h4>
        </li>
        <li>
          <form>
            <select>
              <option disabled selected>Choose...</option>
              <option>Retail</option>
              <option>Retail</option>
              <option>Retail</option>
              <option>Retail</option>
              <option>Retail</option>
            </select>
          </form>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-md-6">
    <div class="ql_box col-md-12">
    </div>
  </div>
</div>

Answer 2

试试这个：

select {
  width: 268px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 5px;
  height: 34px;
  background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
  -webkit-appearance: none;
  background-position-x: 244px;
}

<div class="row">
  <div class="col-md-6">
    <div class="ql_box col-md-12">
      <ul>
        <li>
          <h3>Services</h3>
        </li>
        <li><a class="std_button ql_btn" style="text-align: center; font-size: 16px; padding: 13px; color: #fff;" href="#">VIEW ALL SERVICES</a></li>
        <li>
          <h4>Choose from our resources to find the right service for you.</h4>
        </li>
        <li>
          <form>
            <select>
              <option disabled selected>Choose...</option>
              <option>Retail</option>
              <option>Retail</option>
              <option>Retail</option>
              <option>Retail</option>
              <option>Retail</option>
            </select>
          </form>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-md-6">
    <div class="ql_box col-md-12">
    </div>
  </div>
</div>