Safari disabled select list, and non-disabled select list appear the same

Question

I recently did the UI for an application and I have two select lists:

<select id="location" class="form-control" disabled>&nbsp;</select>   

<select class="form-control valid" data-val="true" data-val-required="The Reason field is required.">       <option value="2">Earth</option>
    <option selected="selected" value="3">Mars</option>
    <option value="4">Jupiter</option>
    <option value="6">Saturn</option>
</select>

The first is disabled. It works and looks just fine on everything except Safari on an iPad (and I'd assume iPhone's, iPods, etc.)

On an iPad the two select lists look identical, even though one is disabled. Is there any way to get disabled select lists to appear "disabled" on these devices or am I missing some important attribute that Safari expects? I have tried disabled="disabled", disabled, and a few other things to no avail.

I have a fiddle here.

Answer 1

Just set the opacity for the device width you are targeting like this:

 @media (max-width:768px) { 
   select:disabled {
      opacity: 0.5;
   }
 }