<!--[if (gte IE 8)&(lte IE 9)]>
<style type="text/css">
.styled-select select { width: 110%; }
</style>
<![endif]-->
<!--[if lte IE 7]>
<style type="text/css">
.fa-sort-desc { display: none;}
</style>
<![endif]-->
<h1>Custom styled selectbox </h1>
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The thrid option</option>
</select>
<span class="fa fa-sort-desc"></span>
</div>
body { margin: 20px; }
h1 { font-size: 1.5em; }
.styled-select {
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 3px;
overflow: hidden;
position: relative;
}
.styled-select, .styled-select select { width: 240px;}
select:focus { outline: none; }
.styled-select select {
height: 34px;
padding: 5px 0 5px 5px;
background: transparent;
border: none;
/*hide default down arrow in webkit */
-webkit-appearance: none;
}
@-moz-document url-prefix(){
.styled-select select { width: 110%; }
}
.fa-sort-desc {
position: absolute;
top: 0;
right: 12px;
font-size: 24px;
}
select::-ms-expand { display: none; } /* hide default down arrow in IE10*/
/* hack to fall back in opera */
_:-o-prefocus, .selector {
.styled-select { background: none; }
}
/* Works in Chrome, Firefox & IE10, fall back for IE 9-*/
This Pen doesn't use any external CSS resources.