我一直在努力尝试将字体真棒图标放入选择选项（下拉菜单）中。我已经尝试了此站点上发布的解决方案。但是，这会将字体真棒图标放在标签旁边，而不是在选择选项框中。
我还尝试将 unicode 直接放入 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: "";
}
下面是一些快照
电流：无箭头
目标：带箭头
你做错了什么，链接实际上是这样做的：
1-标签不会在选择之前结束，而是在选择之后结束。
2-标签用于通过后子选择生成内容的字体很棒的图标。
超文本标记语言
<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>
半铸钢ˌ钢性铸铁(Cast Semi-Steel)
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/
我通过从第一个选项中删除“选定的禁用”来尝试您的代码tag.it非常适合我。
<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>
这是我的代码。你应该试试这个。
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>
