<div class="select-wrapper">
  <select>
    <option class="select-option">Five</option>
     <option class="select-option">One</option>
     <option class="select-option">Seven</option>
    <option class="select-option">Four</option>
    <option class="select-option">Eight</option>
    <option class="select-option">Three</option>
    <option class="select-option">Nine</option>
    <option class="select-option">Two</option>
  </select>
  <span class="select-icon"><i class="fa fa-arrow-down"></i></span>
</div>

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select-option {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background:red;
  display:block;
  width:20px;
  height:40px;
  border:2px solid black;
}

/* Remove arrow from select elements in IE */
::-ms-expand {
  display: none;
}

.select-wrapper {
  overflow: hidden;
  display:inline-block;
  border: 1px solid #c8c8c8;
  background:transparent;
  padding: 0;
  height: 50px;
  min-width: 200px;
  max-width: 300px;
}

.select-wrapper select {
  -webkit-appearance: none;
  background: transparent;
  font-weight: 400;
  font-size: 12pt;
  font-family: 'Open Sans Regular', Arial, Arial;
  border-radius: 0;
  padding: 0 0 0 1.25em;
  width: 100%;
  height: 100%;
  border: none;
}

.select-icon {
  position:relative;
  bottom:51px;
  float:right;
  padding:16px;
  height:100%;
  border:1px solid #C8C8C8;
  border-right:none;
  pointer-events:none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.