更改 HTML "select" 标签的默认箭头

Question

我正在尝试将 HTML "select" 标签的默认箭头更改为与所附照片类似的箭头。有什么想法吗？

Answer 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.whosebug.com/favicon.ico) 95% / 20% no-repeat #fff;
}

https://jsfiddle.net/yorknche/

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

更改 HTML "select" 标签的默认箭头

Changing HTML "select" tag's default arrow

html

css

jquery

web-frontend