在不改变CSS或JavaScript中的背景颜色的情况下，使输入字段只读

Question

我想只读取一个HTML输入字段但没有得到我刚刚添加属性readonly时出现的灰色背景（它看起来应该像普通字段一样不允许编辑）。

有没有办法在CSS和/或JS中实现这一点，理想情况下是一个类？

示例字段：

<input type="text" style="width:96%" class="myClass" />

Answer 1

是的，您可以使用：disabled伪类，例如

input.myClass:disabled {
    /* style declaration here */
}

Answer 2

我认为你误认为残疾和只读

<input type="text" value="readonly" readonly>
<input type="text" value="disabled" disabled>

看看这个小提琴：http://jsfiddle.net/36UwE/

如您所见，只有禁用的输入为灰色（在Windows上使用最新的Chrome和IE进行测试）

但是，根据浏览器，操作系统等，这可能会有所不同。您可以使用css自定义显示：

input[readonly] {
  background-color: white;
}

Answer 3

虽然您可以使用：disabled，：readonly或.myClass CSS选择器应用任何样式，但请注意，不同的浏览器/平台将以不同方式呈现标准，只读和禁用的输入字段，因此尝试根据默认值覆盖颜色，边框和背景对于您的平台（例如Windows）可能会破坏其他平台（例如Mac）上的样式。

覆盖用户期望的默认样式提示通常不是一个好主意，但如果必须这样做，则应确保只读/禁用输入字段在视觉上可辨别，并使用非特定于平台的自定义样式。