add webfont icon using content on :before in a custom html selectbox

Question

I'm trying to make a custom styled selectbox base on the default html selectbox and I'm trying to change its default dropdown icon on the default html selectbox by using :before and then put "content: '\\27'" ("/27" is the ionic icon of a dropdown icon) but sadly not working, any help, suggestion, recommendation, ideas and clues is greatly appreciated. Thank you!

 /* 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

Default dropdown is displayed differently on different browsers and platforms so I believe its better to use customised dropdown like http://tympanus.net/Tutorials/CustomDropDownListStyling/ rather than trying to stylise it. Also I don't think you can add content using pseudo element on dropdown.