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

Question

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

我有一个下拉列表，看起来很好，功能也正常。我们都知道，默认情况下，它在下拉列表的右侧添加了一个下拉箭头。现在我想做的是将箭头的位置稍微下移，比如margin-top:5px。但我找不到任何伪元素或类来编写我的代码。我想只使用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

---

@halfer 抱歉，先生。 - Ramesh

不需要道歉，Ramesh，我只是为你未来的问题提供一些建议！重复问题的建议实际上是有帮助的，很多时候我看到它们解决了手头的问题。 - halfer

这里的重复注册是关于定位自定义箭头，而不是默认设置。错误地将事物标记为重复是不合适的行为。 - m12lrpv

Answer 1

查看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

Answer 2

这种做法并不理想。特别是<select>元素很难进行样式设置。我建议通过appearance: none;来改变外观。

这个帖子是一个很好的开始。

- dkulkarni

---

有没有别的办法？而不是替换箭头，将其位置设置为我想要的位置。 - Ramesh

很抱歉，不行。这就是它们被设计成的工作方式。你最好改变外观以适应你的需求。 - dkulkarni

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

- Morteza Fathnia

---

这甚至是一样的。我想保持箭头原样。你的答案好像是要替换图标。还有其他方法吗？ - Ramesh

Answer 4

更改选择选项中自定义箭头的位置。

background: url(../images/downarrow.png) 97% center no-repeat !important;

- Billu

---

看起来一样。没有保持箭头原本样式并更改位置的选项吗？ - Ramesh

@Ramesh，当您使用向下箭头图像替换现有的向下箭头时，它将起作用。 - Billu

是的，我修改了代码，现在它可以工作了。感谢您的时间和回答。 - Ramesh

Answer 5

在CSS中，没有特殊的伪元素用于选择下拉图标。

但是，您可以通过背景属性更改图标的位置。

或者使用这种“高度”或“行高”来提升外观效果。

.select_category{
  outline: none;
  height: 50px;
  line-height: 50px;
  padding:0px 20px;
}

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

- Vetrivel Pandiyarajan