html 中禁用的文本框使用什么颜色？答案

【问题标题】：What color do disabled text-boxes in html uses?html 中禁用的文本框使用什么颜色？
【发布时间】：2013-04-17 01:56:12
【问题描述】：

我的问题说明了一切。我对在 HTML 使用中禁用文本框的文本颜色和背景颜色感兴趣（也欢迎使用禁用文本框的整个 CSS）。我需要这个，所以我会将一些只读文本框的颜色设置与我的 html 页面中禁用的文本框的颜色相匹配（不希望它们突出）。

附：我需要只读文本框，以便用它们捕获事件。

【问题讨论】：

Chrome 中 disabled 输入的背景颜色是 rgb(235,235,228) 如果有帮助的话..
在 Firefox 中，禁用的输入背景颜色为 F0F0F0。

标签： html css colors

【解决方案1】：

它们是你设置的任何东西。只有 IE9 和更早版本的禁用元素具有固定、不可更改的设置（奇怪的是，在这些版本中，这是获得任何类型的 text-shadow 的唯一方法......）

你可以这样做：

:disabled {background-color:pink; color:blue}

当你禁用它们时会得到泡泡糖色的文本区域！

我想说的是，您可以将样式设置为您想要的任何样式，因此您可以这样做：

:disabled, :read-only, [disabled], [readonly] {background:#cccccc; color:#ffffff}

【讨论】：

非常喜欢解决方案的灵活性 :) 谢谢

【解决方案2】：

背景颜色是十六进制的rgb(235, 235, 228); 或#EBEBE4。

至少这是 chrome 中的值（使用调试器工具检查）。该值在其他浏览器中可能不同

【讨论】：

你应该在发布之前检查所有这些 - 它是 FF 15.0.1 中的不同颜色
OP 检查它们怎么样？我告诉他我能找到什么以及我是如何找到的。

【解决方案3】：

我实施了以下操作，以使任何只读文本框或文本区域（在我的情况下很有用）在只读时显示为禁用。

<style>
input:read-only, 
textarea:read-only,
[contenteditable]:read-only {
  cursor: not-allowed;
  background-color: #EBEBE4 !important;
  color: #C6C6C6;
} 
</style>

或者这个：

<style>
input:read-only, 
textarea:read-only,
[contenteditable]:read-only {
  pointer-events: none;
  background-color: #EBEBE4 !important;
  color: #C6C6C6;
}
</style>

希望这对某人有所帮助！

【讨论】：

好答案，但请注意禁用元素的样式是特定于浏览器的，因此这可能不适用于所有浏览器。
谢谢您指出！我将对跨浏览器只读/输入属性/样式进行一些研究，如果我发现任何有用的东西 - 我会更新我的答案！
我认为如果有人需要有关只读属性样式和跨浏览器支持的信息，请参考此内容：css-tricks.com/almanac/selectors/r/read-write-read

【解决方案4】：

这取决于浏览器。在 Chrome 中是系统颜色“graytext”，所以你不需要记住十六进制代码。

【讨论】：

【解决方案5】：

我的 chrome 具有以下默认值：

background-color: rgb(235, 235, 228);
color: rgb(84, 84, 84);

我猜它可以随着浏览器而改变？

【讨论】：

【解决方案6】：

这是它在 Chrome 中的呈现方式：

textarea:disabled {
  cursor: default; 
  background-color: rgba(239, 239, 239, 0.3);
  color: rgb(84, 84, 84);
  border-color: rgba(118, 118, 118, 0.3);
}

【讨论】：