Question

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

我提供了代码，但是我试图更改默认的箭头图像以及其他背景颜色。（我将整理背景颜色和图像）

我喜欢根据图示的图片。 Example Dropdown Menu 如果可能的话，有人可以给我一些CSS编码的指针吗？

Answer 1

尝试一下：

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>

Answer 2

尝试一下。希望它对您来说很好。

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>

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

2 个答案: