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>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.