css怎么更改指定字体颜色,CSS-如何更改禁用输入的字体颜色？

CSS-如何更改禁用输入的字体颜色？

我需要更改CSS中禁用的输入元素的样式。

我该如何针对Internet Explorer？

10个解决方案

46 votes

您不能使用Internet Explorer。

请参阅我在一个相关主题上写的评论：

似乎没有什么好办法，   看到：   如何使用CSS在IE8中更改禁用的html控件的颜色   -您可以将输入设置为readonly，但这还有其他   后果(例如readonly，   input将发送到服务器   提交时，但使用disabled，它将不会   会)：[http://jsfiddle.net/wCFBw/40]

另请参见：在IE中禁用已禁用的文本框中更改字体颜色

thirtydot answered 2020-01-22T03:52:26Z

39 votes

您可以：

input[type="text"][disabled] {

color: red;

}

Alex K. answered 2020-01-22T03:52:46Z

19 votes

以下内容使您在IE8中非常接近并且也可以在其他浏览器中使用。

在您的html中：

readonly="readonly"

οnfοcus="this.blur();"

tabindex="-1"

class="disabledInput"

/>

在您的CSS中：

.disabledInput {

color: black;

}

在IE8中，悬停时边框颜色会发生少量变化。 一些用于input.disabled Input：hover的CSS可能会解决这个问题。

Charles answered 2020-01-22T03:53:19Z

7 votes

input[disabled], input[disabled]:hover { background-color:#444; }

khan answered 2020-01-22T03:53:35Z

4 votes

将disabled替换为readonly="readonly"。我认为它是相同的功能。

irfan tri atmojo answered 2020-01-22T03:53:55Z

2 votes

似乎没有人为此找到解决方案。 我没有一个既不是基于CSS的也不是，而是通过使用这个JavaScript技巧，我通常可以处理禁用的输入字段。

请记住，禁用字段始终遵循其在禁用之前获得的样式。 因此，诀窍是1启用它们2更改类3再次禁用它们。 由于发生这种情况的速度非常快，用户无法理解发生了什么。

一个简单的JavaScript代码如下所示：

function changeDisabledClass (id, disabledClass){

var myInput=document.getElementById(id);

myInput.disabled=false; //First make sure it is not disabled

myInput.className=disabledClass; //change the class

myInput.disabled=true; //Re-disable it

}

Arash answered 2020-01-22T03:54:24Z

1 votes

这是我针对此问题找到的解决方案：

//如果是IE

inputElement.writeAttribute(“ unselectable”，“ on”);

//其它浏览器

inputElement.writeAttribute(“ disabled”，“ disabled”);

通过使用此技巧，可以将样式表添加到在IE和其他浏览器上无法编辑的输入框上工作的输入元素。

Homa answered 2020-01-22T03:55:06Z

1 votes

您可以将以下样式用于不透明度

input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {

opacity: 0.85 !important;

}

或特定的CSS类

.ui-state-disabled{

opacity: 0.85 !important;

}

myset answered 2020-01-22T03:55:30Z

1 votes

这适用于使禁用的选择选项充当标题。 它不会删除：disabled选项的默认文本阴影，但会删除悬停效果。 在IE中，您不会获得字体颜色，但是至少文本阴影消失了。 这是html和CSS：

Header1

Item1

Item1

Item1

Header2

Item2

Item2

Item2

Header3

Item3

Item3

Item3

Header1

Item1

Item1

Item1

Header2

Item2

Item2

Item2

Header3

Item3

Item3

Item3

yardpenalty answered 2020-01-22T03:56:55Z

0 votes

您可以改用readonly。 以下将为您解决问题。

但是您需要注意以下几点。 根据您的业务需求，可以使用它。

只读元素是不可编辑的，但是当   根据表格提交。 禁用的元素不可编辑且不可编辑   发送提交。

Dulith De Costa answered 2020-01-22T03:57:24Z