更改下拉箭头设计答案

【问题标题】：Change the dropdown arrow design更改下拉箭头设计
【发布时间】：2021-12-22 06:21:21
【问题描述】：

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

从 stackoverflow 中的其他 post1,post2 中，我能够更改箭头颜色，但无法更改箭头设计。这个怎么弄？

我当前的下拉菜单

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

我的代码

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

【问题讨论】：

您必须使用 CSS 属性 appearance: none 来禁用本机箭头，然后在选择框上创建自己的。你有一些例子codepen.io/ericrasch/pen/zjDBx和互联网上的许多其他例子。
@robinvrd ，感谢您提供示例。在那里我找不到与我的要求相关的设计。有什么网站可以参考吗？
希望我的回答能对您有所帮助。
最有可能是因为否决按钮上所述的原因：“这个问题没有显示任何研究工作；它不清楚或没有用”。您可能会考虑展示您从其他帖子中尝试过的内容以及遇到问题的地方。见How do I ask a good question?
@showdev ，你也有同感吗？我在这里研究了很多问题，甚至在我的帖子中引用了这些问题。我还清楚地提供了所需内容的屏幕截图以及我的代码的当前状态:(但我不知道还有什么期望。这不是我在stackoverflow中的第一个问题:)

标签： css drop-down-menu

【解决方案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>

【讨论】：

这个比我的更干净，更好。 +1
谢谢。我会检查它是否有效。所以为此我应该将类似的箭头上传到我的应用程序中并将 URL 指向后台？
对于 IE，你需要添加我在我的解决方案 select::-ms-expand { display: none; } 中提到的 css
@SaiManoj 我将把它添加到示例中，谢谢队友。
不用担心。您可以添加。快乐编码:)

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：