我尝试将插入号向下图标添加到多个选项的第一个选择中,如下图所示:
我无法在上方的小提琴上看到该图标。
以及相应的代码:
.wrapper { height: 200px; background-color: red; padding-top: 100px; padding-left: 150px; } #before-select { font-size: 30px; color: #ffffff; } select { border: none; background: transparent; /*background-color: blue;*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 180px; padding-top: 0px; background-size: 20px; color: #ffffff; font-size: 30px; } select option { color: #424146; background: #ffffff; } <link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> <div class="wrapper"> <form role="form"> <span id="before-select">in</span> <select name="town"> <option value="London">London <i class="fa fa-caret-down" aria-hidden="true"></i> </option> <option value="Paris">Paris</option> <option value="Madrid">Madrid</option> </select> </form> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
您可以简单地将FontAwesome图标添加为所选下拉菜单作为文本。您只需要CSS中的一些东西,FontAwesome CSS和unicode。例如:

select { font-family: 'FontAwesome', 'Second Font name' }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> <select> <option>Hi, </option> <option>Hi, </option> <option>Hi, </option> <option>Hi, </option> <option>Hi, </option> </select>
单击图标可找到unicode:Fontawesome
更新:从Github问题开始,将multiple属性添加到selectelement使其适用于:
OSX El Capitan 10.11.4
select{ font-family: FontAwesome, sans-serif; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> <select multiple> <option> 500px</option> <option> Adjust</option> <option> Adn</option> <option> Align-center</option> <option> Align-justify</option> <option> Align-left</option> <option> Align-right</option> </select>