如何更改CSS中下拉箭头的位置[重复]答案

【问题标题】：How to change the position of a drop down arrow in CSS [duplicate]如何更改CSS中下拉箭头的位置[重复]
【发布时间】：2019-01-13 01:28:24
【问题描述】：

不是重复的 - 请仔细阅读并理解问题。我不想替换箭头。我想保持箭头不变并改变它的位置。 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;
}

【问题讨论】：

@halfer 对不起先生
不需要道歉 Ramesh，只是为您未来的问题添加一些建议！重复问题的建议实际上是有帮助的，而且很多时候我认为它们可以解决手头的问题。

标签： html css dropdown

【解决方案1】：

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

更改外观

这个post 是一个很好的起点。

【讨论】：

没有别的办法了吗？而不是替换箭头，设置我想要的位置
恐怕不行。这就是它们的设计方式。你最好改变外观以满足你的需要。

【解决方案2】：

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

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

【讨论】：

甚至是一样的。我想保持箭头原样。您的答案就像替换图标。有没有其他办法？

【解决方案3】：

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

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

【讨论】：

看起来一样。是否没有选项可以保持箭头不变并更改位置？
@Ramesh，当您使用向下箭头图像替换退出的向下箭头时，它将起作用。
是的，我更改了代码并且它起作用了。感谢您的时间和回答

【解决方案4】：

检查 bootstrap 是如何做到的 here。总之，他们使用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;
}

【讨论】：

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

【讨论】：