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

Question

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

Answer 1

您可以使用伪类来完成此操作.我按照这里的步骤进行修改,删除变换,使用FontAwesome作为我的字体,并使用UTF-8作为内容,如下所示:

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

这是一个实用的代码.