Custom select box

Custom-select-box.markdown

Custom select box

Styling a custom select box using only CSS, it uses an icon font for the down arrow. Tested in Firefox 30, IE8-11 & Chrome 35

A Pen by James Barnett on CodePen.

License.

index.html

<!--[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>

script.js

/* Works in Chrome, Firefox & IE10, fall back for IE 9-*/

style.css

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; }
  }