Question

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

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

示例字段：

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

Answer 1

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

<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 2

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

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

Answer 3

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

覆盖用户期望的默认样式提示通常不是一个好主意，但是如果你必须这样做，那么你应该确保readonly / disabled输入字段在视觉上可以辨别，并使用非平台的自定义样式特异性。

Answer 4

<input type="text" class="form-control" value="MyText" readonly />

<style>
    input.form-control:read-only {
        background-color: #fff;
    }
</style>

或

<input type="text" class="form-control" value="MyText" style="background-color: #fff;" readonly />

更多信息here。

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

4 个答案: