更改 HTML“选择”标签的默认箭头 [重复]答案

【问题标题】：Changing HTML "select" tag's default arrow [duplicate]更改 HTML“选择”标签的默认箭头 [重复]
【发布时间】：2016-12-28 04:15:50
【问题描述】：

我正在尝试将 HTML“选择”标签的默认箭头更改为所附照片中的类似箭头。请问有什么想法吗？

【问题讨论】：

这里有一些可行的解决方案，select arrow style change

标签： jquery css html web-frontend

【解决方案1】：

这是一个纯 CSS 解决方案：您可以隐藏默认箭头并使用背景图像显示另一个箭头。这是一个您可以根据需要自定义的示例。

select {
  width: 100px;
  padding-left: 5px;
  border: 1px solid #ccc;
  height: 25px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 95% / 20% no-repeat #fff;
}

https://jsfiddle.net/yorknche/

【讨论】：

谢谢mxlse！！！！解决了我的问题！！！
我一直在寻找这样的简短答案！

【解决方案2】：

这是您想要的，但您必须根据需要更改 size 值。

<html>
<head></head>
<title></title>


<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<style>
.container{
  position: absolute;
  width: 150px;
}


select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    width: 100%;
    height: 20px;
    font-size: 15px;
    position: absolute;
    opacity: 0.5;

}

.set{
  position: absolute;
  left: 85%;
  
}
</style>

<body>



<div class="container">
<i class="fa fa-angle-down set"></i>
<select class="myselect">
 <option>All &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
 <option>First Option</option>
 <option>Second Option</option>
</select>

</div>

</body>


</html>

【讨论】：

感谢阿努拉德！我有一个问题，为什么我们要在顶部添加 jquery
呃，别管那个，这是我用来回答问题的html文件。所以我也用它来回答jquery。我忘了删除它。对此非常非常抱歉。不影响答案。如果您对代码有任何误解，请见谅。
没问题，兄弟，非常感谢您的支持！