更改下拉箭头设计

Question

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

来自 stackoverflow 中的其他 post1、post2，我能够更改箭头颜色，但无法更改箭头设计。如何获得这个？

我当前的下拉列表

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

我的代码

<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;
  background-position: right .7em top 50%;
  background-size: .65em auto;
}

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

/*
  Shorthand:
  background: 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') right .7em top 50% / .65em no-repeat;
*/

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

Answer 3

这可能对您有帮助：

.form-select{
    padding: .3125rem 3rem .3125rem 1rem;
    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 1rem center;
    border-radius: .25rem;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #d8e2ef;
    color: #344040;
    background-size: 10px 12px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.075);
    outline:none;
}

<select class="form-select">
<option>Uno</option>
<option>Dos</option>
<option>Tres</option>
</select>