更改输入值的颜色答案

【问题标题】：Change color of value in input更改输入值的颜色
【发布时间】：2012-07-04 21:43:38
【问题描述】：

<input class="problem" type="text" value="some text" disabled="disabled">

如何更改“某些文本”的颜色？

upd：CSS 样式仅适用于 Chrome 和 Mozilla。我需要所有浏览器的支持，包括 IE7+

【问题讨论】：

使用 CSS 很简单：color:#ff0000; 会变红
检查 style="color:green" 或任何颜色都适用于所有浏览器
只需添加样式，如答案所示。不过只有一个问题，Opera 在禁用时不会着色。

标签： javascript jquery input colors

【解决方案1】：

只需应用一些 css 样式，例如

.problem {
  color : red;
}

您甚至可以像这样为正常输入和禁用输入定义两种不同的颜色；

.problem { color : red; }
.problem[disabled] { color : #cfcfcf; }

小提琴示例：http://jsfiddle.net/dgNZS

在较旧的 IE 版本上，无法将已禁用输入元素的颜色更改为 answered here，但您可以尝试遵循 bobince 的解决方法。

【讨论】：

我将删除 disabled="disabled"。谢谢

【解决方案2】：

您可以更改所有浏览器中所有属性的文本框的禁用样式，文本颜色除外且仅在 IE 中。对于 IE（对于除文本颜色之外的所有属性），您必须将 doctype 设置为 4.01 strict，然后使用类似的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
input[disabled], input[readonly] { 
 background-color: green; 
 border: #3532ff 1px solid; 
 color: #00FF00;
 cursor: default; 
}
</style>
</head>
<body>
<form>
<input class="problem" type="text" value="some text" disabled="disabled">
</form>
</body>
</html>

但是如果你使用 readonly 而不是 disabled="disabled" 像 Engineer 这样在 ie 中也写了这个作品。

【讨论】：

【解决方案3】：

对于跨浏览器解决方案，您需要使用readonly 和unselectable 属性而不是disabled，并应用这些样式：

.problem[readonly]{
     color: red;
     /*Preventing selection*/
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     /**/
}

标记：

<input class="problem" type="text" value="some text" readonly unselectable="on">

DEMO

【讨论】：

@Godban 我稍微改进了我的答案。再看一遍。

【解决方案4】：

给它一个样式，即style="color:green"

<input class="problem" type="text" value="some text" disabled="disabled" style="color:green">

或者将其包含在您的课堂中以供输入。

【讨论】：

【解决方案5】：

演示 http://jsfiddle.net/ELuXW/1/

API：CSS - http://api.jquery.com/css/

这应该会有所帮助，:)

代码

$('.problem').css('color', 'blue');

【讨论】：