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

Question

NOT A DUPLICATE - 请仔细阅读并理解问题。我不想更换箭头。我想保持箭头的原样并改变它的位置。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;
}

Answer 1

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

这是一个简单的例子

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

Answer 2

无论如何，这样做并不理想。该<select>元素尤其难以设计。我建议通过以下方式更改外观appearance: none;

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