更改下拉箭头设计

Question

我想更改下拉箭头的颜色和箭头模型。

从stackoverflow中的其他post1，post2中

我可以更改箭头颜色，但不能更改箭头设计。如何获得？

我当前的下拉列表

必需（不同样式的蓝色箭头）

Mycode

<div id="contentBottom">
    MyOptions: <select id="P1_LANGUAGE" class="selectlist" size="1" required="" name="p_t01"> </select> 
</div>

Answer 1

这是一个非常简单的示例，您应该提供有关如何完成此技巧的想法。

select {
  padding: 10px;
  padding-right: 30px;

  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

/* For IE (thanks to @SaiManoj) */
select::-ms-expand {
  display: none;
}

<select>
  <option>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
</select>

Answer 2

希望这对您有帮助

/* This is to remove the arrow of select element in IE */
select::-ms-expand {
  display: none;
}

select {
  -webkit-appearance: none;
  appearance: none;
}

.customerStyle select {
  background: transparent;
  width: 100px;
  padding: 5px;
  border: 0;
  border-radius: 0;
  height: 30px;
}
.customerStyle {
  background: url(https://s3.amazonaws.com/peoplepng/wp-content/uploads/2018/06/06124131/Down-Arrow-PNG-Image.png) no-repeat right #ffffff;
  border: 1px solid grey;
  border-radius: 5px;
  width: 100px;
  height: 30px;
  overflow: hidden;
  background-size: 18px 18px;

  }

<div class="customerStyle">
  <select class="selectCustomer">
    <option value="Jone">Jone</option>
    <option value="Tom">Tom</option>
  </select>
</div>