Safari 禁用选择列表和非禁用选择列表显示相同答案

【问题标题】：Safari disabled select list, and non-disabled select list appear the sameSafari 禁用选择列表和非禁用选择列表显示相同
【发布时间】：2017-09-09 17:35:56
【问题描述】：

我最近做了一个应用程序的 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。除了 iPad 上的 Safari（我假设 iPhone、iPod 等）之外，它在所有设备上都可以工作并且看起来都很好。

在 iPad 上，两个选择列表看起来相同，即使其中一个被禁用。有没有办法让禁用的选择列表在这些设备上显示为“禁用”，或者我错过了 Safari 期望的一些重要属性？我尝试了disabled="disabled"、disabled 和其他一些无济于事的方法。

我有一个小提琴here。

【问题讨论】：

标签： html css ipad mobile-safari disabled-input

【解决方案1】：

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

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

【讨论】：