如何将字体真棒图标放入选择下拉菜单中？答案

【问题标题】：How would I place a font-awesome icon into a select drop-down menu?如何将字体真棒图标放入选择下拉菜单中？
【发布时间】：2016-05-07 23:18:42
【问题描述】：

我一直在努力尝试将字体很棒的图标放入选择选项（下拉菜单）中。我已经尝试过发布在此站点上的解决方案here。但是，这会将字体真棒图标放在标签旁边，而不是在选择选项框中。

我还尝试将 unicode 直接放入 html 选项标签中……但是，一旦单击该向下箭头，它就会变成一个问号。（另外，我不能在这个项目中使用引导程序）

请帮忙！

HTML：

<div class="modal-form stack col75">
    <label for="game">Game:</label>
    <select class="form-control easy-drop-down" id="modal-game-options"> 
        <option selected disabled>Please Select a Show</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</div>

CSS：

select {
  border-radius: 0;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  -webkit-appearance: none;
  background-color: white;
  padding-left: 20px;
  content: "&#xf107;";
}

这里有一些快照

当前： without-arrow

目标： with-arrow

【问题讨论】：

很难在带有<select> 元素的浏览器中一致地实现这样的东西。您是否想将其用作表单的一部分，并且需要 <select> 元素，或者您想在单击按钮时显示选项列表？结构更像这样的东西：getbootstrap.com/components/#btn-dropdowns 如果您不将其用作 HTML 表单的一部分，它可能更合适。

标签： html css select font-awesome

【解决方案1】：

链接实际上做错了什么：

1- 标签不是在选择之前结束，而是在选择之后结束。

2- 该标签用于通过后子选择生成带有内容的字体真棒图标。

HTML

<div class="modal-form stack col75">
    <label for="game">Game:
    <select class="form-control easy-drop-down" id="modal-game-options"> 
        <option selected disabled>Please Select a Show</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    </label>
</div>

CSS

select {
  border-radius: 0;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  -webkit-appearance: none;
  background-color: white;
  width: 175px;
}

@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:3px;
    padding:0 0 1px;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:4px; top:0px;
    width:20px; height:16px;
    background:#fff;
    position:absolute;
    pointer-events:none;
    display:block;
}

https://jsfiddle.net/01b9Lh1g/

【讨论】：

【解决方案2】：

我通过从第一个选项标签中删除“选定的禁用”来尝试您的代码。它对我来说非常有效。

<div class="modal-form stack col75">
    <label for="game">Game:</label>
    <select class="form-control easy-drop-down" id="modal-game-options"> 
        <option >Please Select a Show</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</div>

【讨论】：

“选择的禁用”对我来说是否存在并没有什么不同。

【解决方案3】：

这是我的代码。你应该试试这个。

HTML 代码

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<label>
    <select id="international"> 
        <option value="tests" selected="selected">Select Option</option>
        <option value="tests.au">Option 1</option>
        <option value="tests.br/">Option 2</option>
        <option value="tests">Option 3</option>
    </select>
</label>

CSS 脚本

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

【讨论】：

我不允许在此使用引导程序:(
加上该解决方案将箭头放在标签旁边而不是在选择框本身（我在我的问题描述中提供了此解决方案的链接）

【解决方案4】：

我对@DarkHyudrA 的回答做了一些更改..

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
select {
  border-radius: 0;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  -webkit-appearance: none;
  background-color: white; padding:8px 10px; border-radius:2px; border:#ADD8E6 solid 1px; 
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:35px}
}

label {position:relative}
label:after {
    content:"\f078";   
    font-family: "FontAwesome";
    font-size: 10px;
    color:#aaa;
    right:10px; top:3px;
    padding:0 0 1px;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:4px; top:0px;
    width:20px; height:16px;
    background:#fff;
    position:absolute;
    pointer-events:none;
    display:block;
}
</style>


<div class="modal-form stack col75">
<div class="modal-form stack col75">
    <label for="game">Game:
    <select class="form-control easy-drop-down" id="modal-game-options"> 
        <option selected disabled>Please Select a Show</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    </label>
</div>
</div>

这是小提琴

https://jsfiddle.net/cnaysvc5/

【讨论】：