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

Question

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

我有一个下拉列表，它看起来很好，工作也很好。我们都知道，在默认情况下，它在下拉list.Now的右侧添加了一个下拉箭头，我想要做的是将箭头移到更低的位置，比如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

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

这个帖子是一个很好的起点。

Answer 2

看看引导程序是如何做的，这里。总之，他们用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;
}

Answer 3

此代码选择自定义外观，您的问题是：

<select class="white_select select_category">
   <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>

.white_select {
    background: rgba(255,255,255,1) url(../../../assets/images/down-arrow.png) no-repeat scroll calc(5% + 3px) center/8px auto;
    width: 100%;
} 

.select_category {
    font-size: 9px;
    border-radius: 10px;
    padding: 6px 4px;
    border: 1px solid #d7d7d7;
    background: #fff;
    background: rgba(0,0,0,0) url(../../../assets/images/down-arrow.png) no-repeat scroll calc(5% + 3px) center/8px auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #939598;
}