Placeholder behaviour for SELECT

HTML

<form>
<select name="select-treatment" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" style="color: rgb(129, 129, 129);">
	<option value="">Select Treatment</option>
	<option value="Anti-Wrinkle Relaxants">Anti-Wrinkle Relaxants</option>
	<option value="Dermal Fillers">Dermal Fillers</option>
	<option value="Skin Needling (Dermapen)">Skin Needling (Dermapen)</option>
	<option value="The Pure Gold Facial">The Pure Gold Facial</option>
	<option value="Platelet Rich Plasma (Factor 4)">Platelet Rich Plasma (Factor 4)</option>
	<option value="VI Medical Grade Peel">VI Medical Grade Peel</option>
	<option value="Acne Treatments">Acne Treatments</option>
</select>
<input type="submit" value="Submit" />
</form>

CSS

select,
option {
  color: #ccc;
}

select,
input[type="submit"] {
  padding: 5px 10px;
  font: normal normal 18px/18px 'Open Sans', Arial, Helvetica, sans-serif;
  border: #ddd solid 2px;
  border-radius: 2px;
  height: 28px;
  box-sizing: content-box;  
}

input[type="submit"] {
  color: #fff;
  background: #DB0A5B;
  border: #DB0A5B solid 2px;
}

JavaScript

jQuery(document).ready( function($) {
	
	$('select').css('color', '#ccc');
	$('option[value=""]').addClass('placeholder');

	$('select').on( 'mousedown', function() {

		$('option:not(.placeholder)', this).css('color', '#db0a5b');
		$('.placeholder', this).css('color', '#ccc');

	} )
  
	$('select').on( 'change', function() {
		
	    if ( $(this).val() == '' ) {
			$(this).css('color', '#ccc');
	    } else {
			$(this).css('color', '#db0a5b' );     
	    }

	} )  
  
})