我需要更改 CSS 中禁用的输入元素的样式。
<input type="text" class="details-dialog" disabled="disabled" />
如何为 Internet Explorer 执行此操作？
【问题讨论】：
disabled="disabled"
true——另见attribute minimisation in HTML 4.01 和boolean attributes in HTML5。
标签： css internet-explorer input
您可以简单地将 CSS 应用到 disabled 输入
input:disabled {
color: black;
}
【讨论】：
这适用于使禁用的选择选项充当标题。它不会删除 :disabled 选项的默认文本阴影，但会删除悬停效果。在 IE 中你不会得到字体颜色，但至少文本阴影消失了。这是html和css：
select option.disabled:disabled{color: #5C3333;background-color: #fff;font-weight: bold;}
select option.disabled:hover{color: #5C3333 !important;background-color: #fff;}
select option:hover{color: #fde8c4;background-color: #5C3333;}<select>
<option class="disabled" disabled>Header1</option>
<option>Item1</option>
<option>Item1</option>
<option>Item1</option>
<option class="disabled" disabled>Header2</option>
<option>Item2</option>
<option>Item2</option>
<option>Item2</option>
<option class="disabled" disabled>Header3</option>
<option>Item3</option>
<option>Item3</option>
<option>Item3</option>
</select>【讨论】：
您可以改用readonly。以下会为您解决问题。
<input type="text" class="details-dialog" style="background-color: #bbbbbb" readonly>
但您需要注意以下几点。根据您的业务需求，您可以使用它。
只读元素是不可编辑的，但当 根据表格提交。禁用的元素不可编辑且不可编辑 提交时发送。
【讨论】：
您可以使用以下带有不透明度的样式
input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {
opacity: 0.85 !important;
}
或特定的 CSS 类
.ui-state-disabled{
opacity: 0.85 !important;
}
【讨论】：
这是我为这个问题找到的解决方案：
//如果是IE
inputElement.writeAttribute("unselectable", "on");
//其他浏览器
inputElement.writeAttribute("disabled", "disabled");
通过使用此技巧，您可以将样式表添加到在 IE 和其他浏览器中工作的不可编辑输入框上的输入元素。
【讨论】：
unselectable=on 代替 disabled 的“问题”在于，这正是它在锡上所说的！因此，例如，输入字段的内容可以不再被选择但用户仍然可以使用退格键和类型。因此从普通 UI 中更改值，从而击败禁用输入的目的（另一个目的是从表单的 post/get 请求中排除禁用的元素，但是，无论如何，人们永远不能信任服务器端的任何用户输入）。
似乎没有人找到解决方案。我没有一个只基于 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
}
【讨论】：
将disabled 替换为readonly="readonly"。我认为这是相同的功能。
<input type="text" class="details-dialog" readonly="readonly" style="color: ur color;">
【讨论】：
input[disabled], input[disabled]:hover { background-color:#444; }
【讨论】：
以下内容让您在 IE8 中非常接近，并且也可以在其他浏览器中使用。
在您的 html 中：
<input type="text"
readonly="readonly" <!-- disallow editting -->
onfocus="this.blur();" <!-- prevent focus -->
tabindex="-1" <!-- disallow tabbing -->
class="disabledInput" <!-- change the color with CSS -->
/>
在你的 CSS 中：
.disabledInput {
color: black;
}
在 IE8 中，悬停时边框颜色会发生少量变化。 input.disabledInput:hover 的一些 CSS 可能会解决这个问题。
【讨论】：
Internet Explorer 不能。
见this comment我写的一个相关主题：
好像没有什么好办法， 看： How to change color of disabled html controls in IE8 using css - 您可以将输入设置为
readonly，但还有其他 后果（例如readonly，input将被发送到服务器 提交时，但使用disabled，它不会 是）：http://jsfiddle.net/wCFBw/40
另请参阅：Changing font colour in Textboxes in IE which are disabled
【讨论】：
你可以：
input[type="text"][disabled] {
color: red;
}
【讨论】：