How to create a custom select dropdown

How to create a custom select drop down

HTML

<div class="select-dropdown">
<span class="arrow"></span>
<select>
<option>All about that bass</option>
<option>Dear Future Husband</option>
<option>Close Your Eyes</option>
</select>
</div>

CSS

.select-dropdown {
font-size: 16px;
position: relative;
display: inline-block;
}

.select-dropdown select {
outline: none;
-webkit-appearance: none;
display: block;
padding: 1.2em 3em 1.3em 1.5em;
margin: 0;
transition: border-color 0.2s;
border: 1px solid #EB5168;
border-radius: 5px;
background: #fff;
color: #555;
line-height: normal;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}

.select-dropdown .arrow {
background: #fff;
bottom: 5px;
position: absolute;
right: 5px;
top: 5px;
width: 50px;
pointer-events: none;
}

.select-dropdown .arrow:before {
content: '';
position: absolute;
top: 50%;
right: 24px;
margin-top: -5px;
pointer-events: none;
border-top: 10px solid #EB5168;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}

.select-dropdown .arrow:after {
content: '';
position: absolute;
top: 50%;
right: 28px;
margin-top: -5px;
pointer-events: none;
border-top: 7px solid #fff;
border-left: 7px solid transparent;
border-right: 6px solid transparent;
}

Another Select Drop down

HTML

<div class="selectdiv_sd">
<label>
<select>
<option selected> Select Box </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Last long option</option>
</select>
</label>
</div>

CSS

.selectdiv_sd {
position: relative;
/*Don't really need this just for demo styling*/
float: left;
margin: 10px;
}

.selectdiv_sd:after {
content: '\f078';
font: normal normal normal 17px/1 FontAwesome;
color: #0ebeff;
right: 11px;
top: 6px;
height: 34px;
padding: 15px 0px 0px 8px;
position: absolute;
pointer-events: none;
}

/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {
display: none;
}

.selectdiv_sd select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Add some styling */
display: block;
width: 100%;
max-width: 320px;
height: 50px;
float: right;
margin: 5px 0px;
padding: 0px 24px;
font-size: 16px;
line-height: 1.75;
color: #333;
background-color: #ffffff;
background-image: none;
border: 1px solid #0ebeff;
-ms-word-break: normal;
word-break: normal;
}