是否可以使用Font Awesome图标来选择默认下拉符号

Question

我想使用字体真棒“fa-chevron-down”图标而不是html选择框默认样式。请参阅附图。

Answer 1

您可以使用伪类来完成此操作。我按照here步骤进行了修改，删除了变换，使用FontAwesome作为我的字体，将图标的UTF-8作为内容as instructed here：

＆＃13;

＆＃13;

select {
padding:4px;
margin: 0;
background: #fff;
color:#888;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
width: 150px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
}

label {position:relative}
label:after {
content:"\f078";   
font-family: "FontAwesome";
font-size: 11px;
color:#aaa;
right:8px; top:4px;
padding:0 0 2px;
position:absolute;
pointer-events:none;
}
label:before {
content:'';
right:4px; top:0px;
width:23px; height:18px;
background:#fff;
position:absolute;
pointer-events:none;
display:block;
}

＆＃13;

＆＃13;

＆＃13;

Here's a codepen in action.