设置平板电脑设备上禁用输入的样式

Question

我使用以下css代码对禁用的输入进行样式设置。但是，它不适用于移动设备(chrome和Firefox(。

option:disabled{ background-color: khaki; color:black; }

如您所见，以下代码片段适用于 PC，但不适用于移动设备。

option:disabled{
background-color: khaki!important;
color:black;
}

<select>
<option selected disabled>1</option>
<option disabled>2</option>
<option>3</option>
<option>4</option>
</select>

Answer 1

option[disabled="disabled"]{
background: red;
}

<select>
<option>1</option>
<option>2</option>
<option disabled="disabled">3</option>
<option>4</option>
</select>

Answer 2

optgroup.disabled{
background: red;
color: #fff;
}

<select>
<option>1</option>
<option>2</option>
<optgroup class="disabled" label="3"></optgroup>
<option>4</option>
</select>

Answer 3

您是否尝试过使用外观规则重置本机样式？在移动设备上经常出现这种情况。

select {
-moz-appearance: none;
-webkit-appearance: none;
}