是否可以使用Font Awesome图标来选择默认下拉标志 [英] Is it possible to use Font Awesome icon instead to select default drop down sign

问题描述

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

>

解决方案

你可以用伪类来做到这一点。我按照此处的步骤操作，并通过删除变换进行修改，使用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;} / *仅限Webkit浏览器。 FF将显示具有这么多填充的下拉箭头。 * / @ media screen和（-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;}  

这是一个代码在行动。

I would like to use font awesome "fa-chevron-down" icon instead of html select box default style. Please see the attached image.

解决方案

You can do this with pseudo classes. I followed the steps here and modified by removing the transforms, using FontAwesome as my font, and the UTF-8 for the icon as the content 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.

这篇关于是否可以使用Font Awesome图标来选择默认下拉标志的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！