Materialize select not working with custom CSS - drop-down-menu

Question

I have form with a few text and drop-down fields. While text fields are working fine, the dropdown fields are not working as required :
The first option in the drop-down should be disabled but this isn't happening
I have used "required" for select, yet the form gets submitted without alerting. This works fine for text fields though
I feel this is probably something to do with the custom css I have added to change default Materialize theme colors but cannot debug further.
Here is the fiddle link : https://jsfiddle.net/2bxy0gf7/14/
Select HTML
<div class="input-field col col s6 m3 l2">
<select id="FQMreferring_doctor" required="" aria-required="true">
<option value="" selected disabled>Choose your option</option>
<option value="Name1">Name1</option>
<option value="Name2">Name2</option>
</select>
<label for="FQMreferring_doctor">Referring Doctor</label>
</div>
Custom CSS
.dropdown-content li > a,
.dropdown-content li > span {
color: #0067d0 !important;
}
/* label focus color */
.input-field input:focus + label {
color: #0067d0 !important;
}
/* label underline focus color */
.row .input-field input:focus {
border-bottom: 1px solid #00bcd4 !important;
box-shadow: 0 1px 0 0 #00bcd4 !important;
}