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

Question

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

Answer 1

您可以使用伪类来做到这一点。我按照步骤 here并通过删除转换进行修改，使用 FontAwesome 作为我的字体，并将图标的 UTF-8 作为内容 as instructed here :

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;
}

Here's a codepen in action.