Как изменить стрелку Select

.rail-select {
  position: absolute;
  width: 150px;
  select {
    border: solid 1px grey;
    border-radius: 3px;
    font-size: 16px;
    color: gray;
    height: 42px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    &:focus {
      outline: none;
      box-shadow: none;
      border: solid 1px grey;
    }
  }
  .select-side {
    pointer-events: none;
    &:before {
      border-left: solid 1px lightgrey;
      content : "";
      position: absolute;
      left    : 0;
      bottom  : 0;
      height  : 100%;
      width   : 1px;  /* or 100px */
    }
    width: 40px;
    position: absolute;
    top: 0px;
    background-color: #F3F9FE;
    height: 100%;
    left: 120px;
    border-radius: 0px 3px 3px 0px;
    border-right: solid 1px gray;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    i {
      &.blue {
        color: #4E7AF0;
      }
      left: 30%;
      top: 12px;
    }
  }
}
<div class="rail-select">
  <div class="select-side">
    <i class="glyphicon glyphicon-menu-down blue"></i>
  </div>
  <select class="form-control" id="sel1">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                        </select>
</div>

Пример тут - http://codepen.io/Deathgazeroo/pen/wWWMqJ .