Create Custom DropDown

Code :

<div class="custom_select" for="#dropdown">
<select  name="ptype" class="dropdown large" id="dropdown">
<option value="">select purchase type</option>
<option value="IMEI">IMEI</option>
<option value="SKU">SKU</option>
</select>
</div>

CSS :

*
{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
@font-face {
font-family: 'fontawesome';
src:url('file:///C|/Users/fonts/fontawesome-webfont.eot');
url('fonts/fontawesome-webfont.svg') format('svg'),
url('fonts/fontawesome-webfont.woff') format('woff'),
url('fonts/fontawesome-webfont.ttf') format('truetype');
font-family: 'icomoon';
src:url('file:///C|/fonts/icomoon.eot');
src:url('file:///C|/fonts/icomoon.eot?#iefix')
format('embedded-opentype'),
url('file:///C|/Users/fonts/icomoon.woff') format('woff'),
url('file:///C|/Users/fonts/icomoon.ttf') format('truetype'),
url('file:///C|/Users/fonts/icomoon.svg#icomoon')
 format('svg');
    font-weight: normal;
    font-style: normal;
}
select
{
    background: white;
    padding: 5px;
    width: 200px;
    background-color: #F2F2F2;
    outline: 0;
    border: 1px solid #EEEEEE;
    box-shadow: 0px 1px 1px gray ;
    -webkit-box-shadow: 0px 1px 1px gray ;   
    margin: 0px;
      -webkit-appearance: none;
      padding: 5px;
   
}
option
{
    border: none;
    outline: none;
    margin: 0;
    display: block;
   
   

}
.custom_select
{
    position: relative;
    width: 200px;
    height: auto;
    margin: 0px;
    background-color: #f2f2f2;
   
    display: block;
}
.custom_select:after
{
    background-color: gray;
    position: absolute;
    left: 170px;
     top: 0px;
    content: "\f0d7";
     width: 30px;
     height: 30px;
     display: block;
     font-family: 'fontawesome';
     font-weight: bolder;
     text-align: center;
     line-height: 32px;

}
option:first-child
{
    padding: 0px;
}

Demo