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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6186989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:39:45  来源:igfitidea点击:

How to change font-color for disabled input?

cssinternet-explorerinput

提问by isxaker

I need to change the style for a disabled input element in CSS.

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

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

How I can do this for Internet Explorer?

我如何为 Internet Explorer 执行此操作?

采纳答案by thirtydot

You can't for Internet Explorer.

不能用于 Internet Explorer。

See this commentI wrote on a related topic:

请参阅我在相关主题上写的此评论

There doesn't seem to be a good way, see: How to change color of disabled html controls in IE8 using css- you can set the input to readonlyinstead, but that has other consequences (such as with readonly, the inputwill be sent to the server on submit, but with disabled, it won't be): http://jsfiddle.net/wCFBw/40

似乎没有什么好方法,请参阅: 如何使用 css 更改 IE8 中禁用的 html 控件的颜色- 您可以将输入设置为readonly改为,但这会产生其他后果(例如readonlyinput将被发送到服务器提交,但与disabled,它不会):http: //jsfiddle.net/wCFBw/40

Also, see: Changing font colour in Textboxes in IE which are disabled

另请参阅:更改禁用的 IE 文本框中的字体颜色

回答by Alex K.

You can:

你可以:

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

回答by Charles

The following gets you pretty close in IE8 and works in other browsers too.

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

In your html:

在你的 html 中:

<input type="text" 
       readonly="readonly"    <!-- disallow editting -->
       onfocus="this.blur();" <!-- prevent focus -->
       tabindex="-1"          <!-- disallow tabbing -->
       class="disabledInput"  <!-- change the color with CSS -->
       />

In your CSS:

在你的 CSS 中:

.disabledInput {
    color: black;
}

In IE8, there is a slight amount of border color change on hover. Some CSS for input.disabledInput:hover could probably take care of this.

在 IE8 中,悬停时边框颜色会发生轻微变化。input.disabledInput:hover 的一些 CSS 可能会解决这个问题。

回答by khan

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

回答by irfan tri atmojo

Replace disabledwith readonly="readonly". I think it is the same function.

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

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

回答by Arash

It seems nobody found a solution for this. I don't have one based on only css neither but by using this JavaScript trick I usually can handle disabled input fields.

似乎没有人为此找到解决方案。我没有一个只基于 css 的,但通过使用这个 JavaScript 技巧,我通常可以处理禁用的输入字段。

Remember that disabled fields always follow the style that they got before becoming disabled. So the trick would be 1- Enabling them 2-Change the class 3- Disable them again. Since this happens very fast user cannot understand what happened.

请记住,禁用字段始终遵循其禁用之前的样式。所以诀窍是 1-启用它们 2-更改类 3-再次禁用它们。由于这发生得非常快,用户无法理解发生了什么。

A simple JavaScript code would be something like:

一个简单的 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
}

回答by Homa

It is the solution that I found for this problem:

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

//If IE

//如果是IE

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

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

//Other browsers

//其它浏览器

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

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

By using this trick, you can add style sheet to your input element that works in IE and other browsers on your not-editable input box.

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

回答by myset

You could use the following style with opacity

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

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

or a specific CSS class

或特定的 CSS 类

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

回答by yardpenalty.com

This works for making disabled select options act as headers. It doesnt remove the default text shadow of the :disabled option but it does remove the hover effect. In IE you wont get the font color but at least the text-shadow is gone. Here is the html and css:

这适用于使禁用的选择选项充当标题。它不会删除 :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>

回答by Dulith De Costa

You can use readonlyinstead. Following would do the trick for you.

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

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

But you need to note the following. Depends on your business requirement, you can use it.

但是你需要注意以下几点。取决于您的业务需求,您可以使用它。

A readonly element is just not editable, but gets sent when the according form submits. A disabled element isn't editable and isn't sent on submit.

只读元素是不可编辑的,但会在相应的表单提交时发送。禁用的元素不可编辑,也不会在提交时发送。