$(document).ready(function(){
  // wrap all selectors to add ::after in css
  $('select:not([disabled])').wrap('<label class="dropdown">');
  $('select[disabled]').wrap('<label class="dropdownDisabled">');
  // controlling color of elements
  $('select').click(function(){
    var thisDropdown= $(this);
    if($(thisDropdown).prop('selectedIndex') == 0){
      thisDropdown.css('color', '#555555');
      thisDropdown.click( function(){ 
        if($(thisDropdown).prop('selectedIndex') == 0) {
          thisDropdown.css('color', '#c7cacb');
        }
      });
    }
  });
})

/*dropdown styling*/
select {
  width: 230px;
  height: 46px;
  background: #f1f5f8;
  color:#c7cacb;
  font-size: 16pt;
  padding: 3px;
  border: 2px solid #d7d6d5;
  border-radius: 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select::-ms-expand {/*removing dropdown arrow for IE*/
  display: none;
}
.dropdownlabel {display: block; font-size: 16pt; margin-bottom: 10px; color: #d7d6d5}
label.dropdown::after {/*adding custom arrow*/
    content: "\e90e";
    font-family: 'icomoon';
    font-size: 8pt;
    color: #555555;
 display:inline-block;
 box-sizing:border-box;
    margin-left: -32px;
    pointer-events :none; /* let the click pass trough */
}

select[disabled] {
 color: #c7cacb;
 border: 2px solid #e4e5e6;
}

label.dropdownDisabled::after {
    content: "\e90e";
    font-family: 'icomoon';
    font-size: 8pt;
    color: #d3d5d7;
 display:inline-block;
 box-sizing:border-box;
    margin-left: -32px;
    pointer-events :none; /* let the click pass trough */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selected" class="dropdownlabel">Dropdown label</label>
<select name="selected">
  <option value="s">None Selected</option>
  <option value="s2">Selected</option>
  <option value="s3">Another value</option>
</select>