使输入字段只读而不更改 CSS 或 JavaScript 中的背景颜色答案

【问题标题】：Make input field readonly without changing background colour in CSS or JavaScript使输入字段只读而不更改 CSS 或 JavaScript 中的背景颜色
【发布时间】：2014-02-28 07:00:56
【问题描述】：

我想将 HTML 输入字段设置为只读，但不会出现我刚刚添加只读属性时出现的灰色背景（它应该看起来与普通字段相同，只是不允许编辑）。

有没有办法在 CSS 和/或 JS 中实现这一点，最好是通过一个类？

示例字段：

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

【问题讨论】：

how to disable keyboard events on an input text box in javascript 的可能重复项
readonly="readonly"，不会使输入变灰。
@ParthoGanguly 我认为他的意思是禁用真的..？
@Mr.Alien：显然我想多了xD
@ManuelRicharz - 我没有发现任何区别，我只使用 Chrome。

标签： javascript html css background-color readonly

【解决方案1】：

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

【讨论】：

【解决方案2】：

我认为你误认为 disabled 和 readonly

<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;
}

【讨论】：

定义一个 background: white; 将它们设置为相同的样式
readonly和disabled的主要区别是提交表单时发送的是readonly字段，而不是disabled的字段。

【解决方案3】：

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

覆盖用户期望的默认样式提示通常不是一个好主意，但如果您必须这样做，那么您应该确保只读/禁用输入字段与标准输入字段在视觉上可以区分，并使用非平台的自定义样式- 特定的。

【讨论】：

【解决方案4】：

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

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

【讨论】：