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
How to change font-color for disabled input?
提问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
readonly
instead, but that has other consequences (such as withreadonly
, theinput
will be sent to the server on submit, but withdisabled
, it won't be): http://jsfiddle.net/wCFBw/40
似乎没有什么好方法,请参阅: 如何使用 css 更改 IE8 中禁用的 html 控件的颜色- 您可以将输入设置为
readonly
改为,但这会产生其他后果(例如readonly
,input
将被发送到服务器提交,但与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 disabled
with readonly="readonly"
. I think it is the same function.
替换disabled
为readonly="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 readonly
instead. 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.
只读元素是不可编辑的,但会在相应的表单提交时发送。禁用的元素不可编辑,也不会在提交时发送。