Customized select drop down arrow not working - html

Question

I have tried to customized the select drop down. But the arrow of the select is not working. I want to make it as this image. But it is how far I could reach. Here is the image of how I want it to be. Please have a look at it.
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="selectdiv ">
<label>
<select>
<option selected> Select Box </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Last long option</option>
</select>
</label>
</div>
CSS
body {
background: #f2f2f2;
}
.selectdiv {
position: relative;
/*Don't really need this just for demo styling*/
float: left;
min-width: 150px;
margin: 50px 33%;
background:rgba(43, 43, 43, 0.4);
border-radius: 5px 0 0 5px;
padding: 5px;
}
.selectdiv:after {
content: '\f078';
font: normal normal normal 17px/1 FontAwesome;
color: #2B2B2B;
right: -44px;
top: 0px;
height: 33px;
padding: 15px 12px 0px 12px;
border:1px solid #2B2B2B;
border-radius: 0 5px 5px 0;
position: absolute;
}
/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {
display: none;
}
.selectdiv select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Add some styling */
display: block;
width: 100%;
max-width: 150px;
margin: 5px 0px 5px 0px;
padding: 0px 24px;
font-size: 16px;
line-height: 1.75;
color: #333;
background: transparent;
-ms-word-break: normal;
word-break: normal;
border: 0;
border-bottom: 1px solid #fff;
outline:none;
}
I have added the codepen.io link here. Please look at it. https://codepen.io/anon/pen/vzKrXK

Answer 1

modify your .selectdiv:after css like this, change url with any image you want:
.selectdiv:after {
content: '';
background-color: #fff;
background: url(http://icocentre.com/Icons/g-arrow-down.png?size=16) no- repeat right #ddd;
-webkit-appearance: none;
background-position-x: 5px;
width: 10px;
font: normal normal normal 17px/1 FontAwesome;
color: #0ebeff;
right: 11px;
top: 6px;
height: 34px;
padding: 15px 0px 0px 8px;
border-left: 1px solid #0ebeff;
position: absolute;
pointer-events: none;
}