使用以下内容添加webfont图标：在自定义html选择框之前

Question

我正在尝试在默认的html选择框上创建一个自定义样式的选择框，我试图通过使用：before然后将“content：'\ 27'”更改为默认html选择框上的默认下拉图标（“/ 27”是下拉图标的离子图标）但遗憾的是没有工作，非常感谢任何帮助，建议，推荐，想法和线索。谢谢！

/* select box */
.dodong_ui_selectbox{
    border: 1px solid #ccc;
    -webkit-appearance: none;
    padding: 5px;
}
.dodong_ui_selectbox:before{
    content: '\27';
}
.dodong_ui_selectbox:active, .dodong_ui_selectbox:focus{
    outline: none;
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

<select name="user" class="dodong_ui_selectbox">
  <option value="user1">Jason Acappela</option>
  <option value="user2">Mark Henry</option>
  <option value="user3">Xoe Jii</option>
  <option value="user4">Abdul Abubakar Muhammad</option>
  <option value="user5">Juan De la Cruz</option>
</select>

Answer 1

默认下拉列表在不同的浏览器和平台上的显示方式不同，所以我认为最好使用http://tympanus.net/Tutorials/CustomDropDownListStyling/之类的自定义下拉菜单，而不是尝试设计样式。另外我认为你不能在下拉列表中使用伪元素添加内容。