更改下拉箭头设计

Question

我想改变下拉箭头的颜色和模型。
根据stackoverflow的其他文章(post1,post2)，我已经成功地改变了箭头的颜色，但无法改变箭头的设计。如何获得所需效果？
我的当前下拉选项：
要求的效果（不同样式的蓝色箭头）：
我的代码：

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

- Arun Palanisamy

---

您需要使用CSS属性appearance: none来禁用原生箭头，然后创建自己的选择框。这里有一些示例 https://codepen.io/ericrasch/pen/zjDBx 以及互联网上的许多其他示例。 - robinvrd

希望我的答案能够更好地帮助你。 - robinvrd

很可能是因为下投票按钮上所述的原因：“这个问题没有展示任何研究努力；它不清楚或者没有用处”。你可以考虑展示一下你从其他帖子中尝试过什么以及你卡在哪里了。请参阅如何提出一个好问题？ - showdev

@showdev，你有同感吗？我已经研究了这里之前提出的许多问题，甚至在我的帖子中引用了这些问题。此外，我还清楚地提供了所需内容和当前状态的屏幕截图以及我的代码:( 但我不知道还需要什么。而且这不是我在stackoverflow上的第一个问题 :) - Arun Palanisamy

太好了！展示你具体尝试了什么以及它为何不起作用会很有帮助。这样可以使帖子对未来的读者更有用，甚至可能有益于您自己的故障排除和学习过程。既然你问为什么会被踩，这里有一些来自SO的好建议：“询问现有实现中的具体问题……首先诚信地尝试解决问题……帮助他人重现问题”。 - showdev

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>

- robinvrd

---

这一个方案比我的更简洁、更好。点赞！ - Sai Manoj

谢谢。我会检查它是否有效。所以为了实现这个，我应该将类似的箭头上传到我的应用程序中，并在后台指向URL？ - Arun Palanisamy

对于IE浏览器，您需要添加我在解决方案中提到的CSS代码：select::-ms-expand { display: none; }。 - Sai Manoj

@SaiManoj 我会把这个加入到例子中，谢谢伙计。 - robinvrd

没问题，你可以添加。愉快的编码 :) - Sai Manoj

Answer 2

Hope this helps out

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

- Sai Manoj

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>

- stats con chris