在CSS或JavaScript中使输入框只读，但不改变背景颜色

Question

我想要让一个HTML输入框只读，但是不希望像加上readonly属性时那样出现灰色背景（它应该看起来和普通的输入框一样，只是不能编辑）。

是否有一种方法可以在CSS和/或JS中实现这一点，最好使用一个类？

示例字段：

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

- user2571510

---

可能是 如何在 JavaScript 中禁用输入文本框的键盘事件 的重复问题。 - Cerbrus

readonly="readonly"并不会使输入变灰。 - Developer

@ParthoGanguly 我认为他的意思是 disabled true..? - Grijesh Chauhan

@Mr.Alien：显然我想太多了 xD - Cerbrus

@ManuelRicharz - 我没有发现任何区别，而且我只使用Chrome浏览器。 - Developer

Answer 1

我认为你混淆了“disabled”和“readonly”两个属性的含义。

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

看看这个fiddle： http://jsfiddle.net/36UwE/

正如您所看到的，在最新的Chrome和IE浏览器以及Windows操作系统上，只有禁用的输入框是灰色的。

然而，这可能会因浏览器、操作系统等而有所不同。您可以使用CSS自定义显示：

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

- Anthony Garcia-Labiad

---

定义一个 background: white; 来设置它们相同的样式。 - Dwza

只读字段和禁用字段的主要区别在于，当表单提交时，只读字段会被发送，而禁用字段不会。 - Anthony Garcia-Labiad

Bootstrap 4（至少）将只读输入的背景颜色设置为灰色。解决方案（如上所述@Dwza）是使用<input readonly class="bg-white form-control" value="..." />。 - GuruBob

Answer 2

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

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

- datafunk

Answer 3

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

更多信息请点击此处。

- Joel Wiklund

Answer 4

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

通常不建议覆盖用户期望的默认样式提示，但如果必须这样做，则应确保只读/禁用输入字段与标准字段在视觉上有区别，并且使用非特定于平台的自定义样式。

- darsh

Answer 5

这适用于所有输入字段：

input:read-only {
    background: whitesmoke;
}

- shasi kanth