CSS
Add CSS to Disabled or ReadOnly Inputs
As we all know, Internet Explorer is very special to developers. When you add a disabled or readonly attribute to a text input, the background color or the text color of the input is different in IE than in Firefox or Chrome. How we can apply styles to them? Let’s discuss each attribute in part:
“Disabled” Attribute
ASP.NET TextBox
|
1 2 |
<asp:TextBox ID="txtDisabled" Enabled="false" runat="server"> </asp:TextBox> |
HTML Input
|
1 |
<input id="ctl00_txtDisabled" style="width: 120px;" type="text" disabled="disabled" /> |
You can apply CSS styling on disabled inputs by using this:
|
1 2 |
input[disabled]{background-color:#F0F0F0 !important; color:#303030 !important;} |
The style can be applied on all browsers except Internet Explorer. IE ignores the color attribute.
ASP.NET
ASP.NET generates an extra class on disabled controls named aspNetDisabled. You can use it to add styles to custom ASP.NET controls such as CheckBoxList.
Telerik
If you set on almost any Telerik input the Enable attribute to false, the control will add in the markup a disabled class. For example, for the RadComboBox control, in the markup you will find the rcbDisabled class. Based on that class you can adjust your style on that control.
“ReadOnly” Attribute
ASP.NET TextBox
|
1 2 |
<asp:TextBox ID="txtReadOnly" ReadOnly="true" runat="server"> </asp:TextBox> |
HTML Input
|
1 2 3 |
<input lang="css" type="text” id=" readonly="readonly" /> input[readonly]{background-color:#F0F0F0 !important; color:#303030 !important;} |
The style can happily be applied on all browsers including Internet Explorer.
Telerik
If you have a RadMaskedTextBox control in your page, it’s sufficient to set the ReadOnly attribute to true; The CSS class will be applied to it.
Differences
As far as I know the difference between disabled and readonly inputs is that the disabled input don’t reach the server on form submit.
