我试图用 fa 图标（chevron-circle-down）替换选择下拉箭头，但我只能发现背景可以用 css 文件中的图像替换。我可以在选择上添加图标，但是它不可点击。如何在选择下拉列表中使用字体图标有任何帮助吗？
因为你不能使用pseudo-elements on <select>你用它们label反而。
using:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
将隐藏默认值down arrow the select有，而是你使用fa-chevron-circle-down带有 unicode 的图标\f13a as an :after伪元素应用于label
这并不是一个真正“漂亮”的解决方案，但它确实有效
让我知道是否有帮助
见下面的片段
label.wrap {
width:200px;
overflow: hidden;
height: 50px;
position: relative;
display: block;
border:2px solid blue;
}
select.dropdown{
height: 50px;
padding: 10px;
border: 0;
font-size: 15px;
width: 200px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
label.wrap:after {
content:"\f13a ";
font-family: FontAwesome;
color: #000;
position: absolute;
right: 0;
top: 18px;
z-index: 1;
width: 10%;
height: 100%;
pointer-events: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<label class="wrap">
<select class="dropdown">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</label>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
