用 fa-icon 替换选择下拉箭头 [英] replace select dropdown arrow with fa-icon
问题描述
我正在尝试用 fa-icon (chevron-circle-down) 替换选择下拉箭头，但我只能发现可以用 css 文件中的图像替换背景.我可以将图标添加到选择，但它不会被点击.任何帮助我如何在选择下拉列表中使用字体图标?
I am trying to replace a select dropdown arrow with a fa-icon (chevron-circle-down) but I can only find that the background can be replaced with an image in the css file.I can add the icon over the select,but it won't be clickable.Any help how I use font icon in select dropdown list ?
推荐答案
因为你不能在 上使用 pseudo-elements 你在一个label 代替.
as you can't use pseudo-elements on <select> you use them on a label instead.
使用:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
将隐藏 select 具有的默认 向下箭头，而是使用 fa-chevron-circle-down 图标和它的 unicode f13a 作为应用于 label
will hide the default down arrow the select has and instead you use the fa-chevron-circle-down icon with it's unicode f13a as an :after pseudo-element applied to the label
这不是一个真正漂亮"的解决方案，但它确实有效
it's not really a 'beautiful' solution, but it does the trick
如果有帮助请告诉我
见下面的片段
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>这篇关于用 fa-icon 替换选择下拉箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
