Safari浏览器禁用选择列表，和非残疾人选择列表出现在同一个

Question

我最近做了UI的应用程序，我有两个选择列表：

<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> 

首先是disabled。它的工作原理和外观上，除了Safari浏览器在iPad上的一切就好了（而且我认为iPhone的，音乐播放器等）

在iPad上的两个选择列表看起来相同，即使一个被禁用。有什么办法让禁用选择列表在这些设备上显示为“禁用”，或者我错过了Safari期望的一些重要属性？我曾尝试disabled="disabled"，disabled，以及其他一些东西也没有用。

我有一个小提琴here。

Answer 1

只需设置不透明度为你的目标是这样的设备宽度：

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