How to change font-color for disabled input?
CssInternet ExplorerInputCss Problem Overview
I need to change the style for a disabled input element in CSS.
<input type="text" class="details-dialog" disabled="disabled" />
How I can do this for Internet Explorer?
Css Solutions
Solution 1 - Css
You can't for Internet Explorer.
See this comment I wrote on a related topic:
> There doesn't seem to be a good way,
> see:
> https://stackoverflow.com/questions/1411044/
> - you can set the input to readonly
instead, but that has other
> consequences (such as with readonly
,
> the input
will be sent to the server
> on submit, but with disabled
, it won't
> be): http://jsfiddle.net/wCFBw/40
Solution 2 - Css
You can:
input[type="text"][disabled] {
color: red;
}
Solution 3 - Css
The following gets you pretty close in IE8 and works in other browsers too.
In your 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:
.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.
Solution 4 - Css
input[disabled], input[disabled]:hover { background-color:#444; }
Solution 5 - Css
Replace disabled
with readonly="readonly"
. I think it is the same function.
<input type="text" class="details-dialog" readonly="readonly" style="color: ur color;">
Solution 6 - Css
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.
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.
A simple JavaScript code would be something like:
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
}
Solution 7 - Css
It is the solution that I found for this problem:
//If IE
inputElement.writeAttribute("unselectable", "on");
//Other browsers
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.
Solution 8 - Css
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
.ui-state-disabled{
opacity: 0.85 !important;
}
Solution 9 - Css
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:
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>
Solution 10 - Css
You can use readonly
instead. Following would do the trick for you.
<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.
Solution 11 - Css
You can simply apply CSS to disabled
input
input:disabled {
color: black;
}