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

Posted 2023-03-06

【中文标题】如何更改禁用输入的字体颜色？

【英文标题】：How to change font-color for disabled input?

【发布时间】：2011-09-05 10:20:52

【问题描述】：

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

<input type="text" class="details-dialog" disabled="disabled" />

如何为 Internet Explorer 执行此操作？

【问题讨论】：

旁注：禁用属性的正确语法是disabled="disabled"

@NGLN 仅当您使用 html5 或 XHTML 的 XML 序列化时。

@NGLN Kevin 是正确的，原始 HTML 没有问题。仅存在布尔属性就表示该值为true——另见attribute minimisation in HTML 4.01 和boolean attributes in HTML5。

【参考方案1】：

您可以简单地将 CSS 应用到 disabled 输入

input:disabled 
  color: black;

【参考方案2】：

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

select option.disabled:disabledcolor: #5C3333;background-color: #fff;font-weight: bold;
select option.disabled:hovercolor:  #5C3333 !important;background-color: #fff;
select option:hovercolor: #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>

【参考方案3】：

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

<input type="text" class="details-dialog" style="background-color: #bbbbbb" readonly>

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

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

【参考方案4】：

您可以使用以下带有不透明度的样式

input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] 
    opacity: 0.85 !important;

或特定的 CSS 类

.ui-state-disabled
    opacity: 0.85 !important;

【参考方案5】：

这是我为这个问题找到的解决方案：

//如果是IE

inputElement.writeAttribute("unselectable", "on");

//其他浏览器

inputElement.writeAttribute("disabled", "disabled");

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

【讨论】：

被视为旧版msdn.microsoft.com/en-us/library/hh801966(v=vs.85).aspx

用 MS 的 unselectable=on 代替 disabled 的“问题”在于，这正是它在锡上所说的！因此，例如，输入字段的内容可以不再被选择但用户仍然可以使用退格键和类型。因此从普通 UI 中更改值，从而击败禁用输入的目的（另一个目的是从表单的 post/get 请求中排除禁用的元素，但是，无论如何，人们永远不能信任服务器端的任何用户输入）。

【参考方案6】：

似乎没有人找到解决方案。我没有一个只基于 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

【讨论】：

我的直觉反应是做同样的事情。问题是无法更改文本颜色。它将始终是相同的灰色。

【参考方案7】：

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

<input type="text" class="details-dialog" readonly="readonly" style="color: ur color;">

【讨论】：

只读不一样。发送到服务器的只读值，您需要添加 tabindex="-1" 以停止跳动，可能会产生更多副作用。

【参考方案8】：

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

【讨论】：

+1 在 IE10 上为我工作。不确定其他浏览器。但是无法使用颜色样式更改文本颜色。

对我来说工作正常，已通过 Chrome 和 IE 验证，所有版本从 8 到 11。

【参考方案9】：

以下内容让您在 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 可能会解决这个问题。

【讨论】：

您应该避免使用内联事件来执行此类 UI 更改。最好的方法就像@alex-k 建议的那样。

@ruionwriting 除了 Alex K 的解决方案在 IE7-9 中不起作用。支持它的人显然没有测试它或关心 IE。

最佳答案！！在 Chrome 和 IE 7-9 中为我工作。谢谢！

【参考方案10】：

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

【讨论】：

又一个原因，我很烂！！

看看下面的@Charles 答案，这是一个很好的解决方法，在我看来应该被选为“正确”的答案

唯一的 readonly 是它仍然具有选项的效果，即：悬停和选中

【参考方案11】：

你可以：

input[type="text"][disabled] 
   color: red;

【讨论】：

+1 为正确答案。 （但是，应该注意，IE6 不支持此功能。我建议不支持 IE6，但如果您确实需要支持它，那么您需要使用动态类来代替，根据@max 的回答）

@thirtydot 虽然您认为答案不正确是正确的，但我认为这是为了向前兼容而应该采用的方式。不仅仅是 IE 存在表单控件问题。表单控件被所有 UA 以某种方式、形状或形式混为一谈。

@Spudley 如果它在 IE 中不起作用并且 OP 询问“我如何为 IE 做到这一点？”，你不能说它是正确的。

@Spudley 它在任何版本的 IE 中都不起作用（不是 100% 确定 9）。

确认，在任何版本的ie中都不起作用，不要在这个实现上浪费你的时间。