<label for="">
  Select Box
  <select name="">
    <option value="">Select Option</option>
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
    <option value="">Option 4</option>
  </select>
</label>
 

@import "bourbon";

@import '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css';
@import 'https://fonts.googleapis.com/css?family=Slabo+27px';

$select_height: rem(60); 
$dark: #222;

* {
  @include box-sizing(border-box);
}

body {
  background: $dark;
}

label.select {
  display: block;
  position: relative;
  width: 40%;
  margin: 25% auto 0;
  font-family: 'Slabo 27px', serif;
  color: white;
  font-size: rem(30);
  
  select {
    display: block;
    position: relative;
    z-index: 10;
    width: 100%;
    height: $select_height;
    font-size: rem(14);
    border: none;
    opacity: 0;
    cursor: pointer;
  }
  
  span.select {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: $select_height;
    line-height: $select_height;
    background: white;
    border: 1px solid #c0ffee;
    border-radius: rem(3);
    color: $dark;
    font-size: rem(26);
    padding: 0 10px;
   
    &:after {
      content: '\f078';
      position: absolute;
      right: -1px;
      top: -1px;
      height: $select_height;
      width: $select_height;
      font-family: 'FontAwesome';
      font-size: 12px; 
      background: #c0ffee;
      text-align: center;
      color: dec4fe;
      border-radius: 0 rem(3) rem(3) 0;
    }
  }
}

$('select').each(function(){
 $(this).parent().addClass('select').append('<span class="select"></span>');
   var text = $('option:selected', this).text();
  $(this).next('span.select').text(text);
});

$('select').change(function(){
  var text = $('option:selected', this).text();
  $(this).next('span.select').text(text);
  console.log( text );
});