Safari 禁用 select 列表，和非禁用 select 列表显示相同

Question

我最近为一个应用程序做了 UI，我有两个 select 列表：

<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。它在 iPad 上的 Safari 除外（我假设 iPhone、iPod 等）

在 iPad 上，两个 select 列表看起来相同，即使其中一个被禁用。有什么方法可以让禁用的 select 列表显示在这些设备上 "disabled" 或者我是否缺少 Safari 期望的一些重要属性？我试过 disabled="disabled"、disabled 和其他一些方法都无济于事。

我有一个fiddlehere。

Answer 1

只需为您定位的设备宽度设置不透明度，如下所示：

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

Safari 禁用 select 列表，和非禁用 select 列表显示相同

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

html

css

mobile-safari

disabled-input

ipad