如何更改CSS中下拉箭头的位置

Question

不是重复的-请仔细阅读并理解问题。我不想替换箭头。我想保持箭头原样并改变它的位置。 appearance:none 可以隐藏箭头并通过设置 background:url() 我也许可以替换箭头，但这不是我的问题

我有一个下拉列表，它看起来不错并且工作正常。我们都知道默认情况下它会在下拉列表的右侧添加一个下拉箭头。现在我想做的是将箭头向下移动到像 margin-top:5px 这样的位置。但我找不到任何 pseudo elements 或 classes 来编写我的代码。我只想使用 css 来实现这一点。我找到了隐藏元素并添加另一个元素的样式，但就我而言，我想保持图标原样并更改位置。

HTML

 <select class="dropdown-select">
   <option value="">Select Location</option>
   <option value="location-1">Location 1</option>
   <option value="location-2">Location 2</option>
   <option value="location-3">Location 3</option>
</select>

CSS

 .dropdown-select{
  outline: none;
  border: none;
}

原文由 Ramesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

无论如何，这样做并不理想。 <select> 元素特别难以设置样式。我建议通过 appearance: none; 更改外观

这篇 文章 是一个很好的起点。

原文由 dkulkarni 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 此处 查看 bootstrap 是如何进行的。总之，他们使用 appearance: none 隐藏原始图标，并使用 background-image 属性添加自定义 SVG 图标

这是一个简单的例子

select {
    display: block;
    width: 100%;
    font-size: 1em;
    padding: 0.8rem 0.5rem;
    border: 1px solid #333;
    font-family: inherit;
    /** for the dropdown indicator */
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

原文由 Nixon Kosgei 发布，翻译遵循 CC BY-SA 4.0 许可协议