.NET Daily

Add CSS to Disabled or ReadOnly Inputs

Introduction

Darius

Darius

Darius Dumitrescu is a creative Senior CMS Consultant with in depth .NET knowledge, focused on Web Development and Architecture Design.


LATEST POSTS

My View on the Life cycle of a Fixed Cost Web Project 01st July, 2018

How to Deliver Accurate Project Status Reports 21st April, 2018

CSS

Add CSS to Disabled or ReadOnly Inputs

Posted on .

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



HTML Input

You can apply CSS styling on disabled inputs by using this:

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



HTML Input


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.

Darius

Darius

Darius Dumitrescu is a creative Senior CMS Consultant with in depth .NET knowledge, focused on Web Development and Architecture Design.

There are no comments.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

View Comments (0) ...
Navigation