Custom styling of select dropdowns.

_select.scss

.select-dropdown {
  position: relative;

  i {
    @include background-image(linearselect-gradient($white 0, darken($white, 2%) 100%, transparent 80%));
    @include position(absolute, 1px 3% 0 0);
    background: $white;
    background:         linear-gradient(top, $white, darken($white, 5%));
    background:      -o-linear-gradient(top, $white, darken($white, 5%));
    background:    -moz-linear-gradient(top, $white, darken($white, 5%));
    background: -webkit-linear-gradient(top, $white, darken($white, 5%));
    color: $medium-gray;
    font-size: em(16);
    padding: 8px 4% 0;
  }

  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    sppearance: none;
    @include background-image(linearselect-gradient($white 0, darken($white, 2%) 100%, transparent 80%));
    @include transition(color, 0.2s linear);
    background:         linear-gradient(top, $white, darken($white, 5%));
    background:      -o-linear-gradient(top, $white, darken($white, 5%));
    background:    -moz-linear-gradient(top, $white, darken($white, 5%));
    background: -webkit-linear-gradient(top, $white, darken($white, 5%));
    border-radius: 4px;
    border: 1px solid darken($stroke-color, 10%);
    color: darken($medium-gray, 22%);
    cursor: pointer;
    font-size: em(16);
    font-family: 'proxima-nova', $helvetica;
    outline: none;
    padding: 6px 4%;
    width: 100%;

    &:hover {
      border: 1px solid darken($light-gray, 20%);
      color: $dark-gray;
    }

    &:active {
      outline: none;
    }
  }
}