Safari禁用选择列表，非禁用选择列表显示相同

Question

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

// Create a LatLngBounds that includes the city of Adelaide in Australia.
final LatLngBounds ADELAIDE = new LatLngBounds(
    new LatLng(-35.0, 138.58), new LatLng(-34.9, 138.61));

// Constrain the camera target to the Adelaide bounds.
mMap.setLatLngBoundsForCameraTarget(ADELAIDE);

第一个是<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> 。除了iPad上的Safari之外，它的功能和外观都很好（我会假设iPhone，iPod等）。

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

我有一个小提琴here。

Answer 1

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

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