"Fun"!
This weekend I was working on some basic ASP.NET input forms inside an existing application. The forms can be opened for read mode, or for edit mode - as you might expect from a form! There was some C# code which was setting the textboxes to be enabled or disabled (but still visible) depending on the appropriate edit mode, and I naievely figured it'd be pretty easy to throw in some css to simply remove the textbox borders when the form was being viewed, which would make the data look like labels.
Labels being what should have been used in this case all along. I'll state that now for the record, so you know I get it. Because if you search about a bit on this topic you'll get a lot of people simply saying "Don't use a Textbox with enabled=false", which is really helpful. Yes, it's better to use labels - but sometimes you might have a good reason for doing things in a less than ideal way, and in that case it's less than helpful reading 394812 forum posts from smart asses simply saying "Don't do that". Ahem. I'm finished now.
Anyhow, I quickly found out that a css class for input[disabled] was probably the closest I there was for styling Textboxes with Enabled="False", and it worked fine in Firefox:
input[disabled]
{
border: none;
color: #000;
background-color: #fff;
}
This also works in IE7, with one exception - you can't control the text colour. Which is annoying, because the default colour that IE7 uses to denote a disabled field is an incredibly light grey. In fact annoying is the wrong word to use because it's a dealbreaker on any form where light grey happens to blend in, which is a fair few of them.
Next, I tried similar experiments using ReadOnly="true" on my Textbox - all to no avail.
Sticking with the ReadOnly theme, I decide to test programatically setting the Textbox CssClass property at runtime, at the same time where the Textboxes have their ReadOnly property set.
While I'm throwing together a quick css class for the 'enabled' and 'disabled' versions of my form inputs I notice something strange. As I only want to disable the borders when the field is 'ReadOnly' (so it looks like the control I should be using, which is a label). So I try the bare minimum:
.formInputReadOnly
{
border: none;
}
Which works in Firefox, but of course not in IE7. In IE7, the borders are still showing up. However, when I add a background-color then it works in both browers:
.formInputReadOnly
{
border: none;
background-color: #fff;
}
Interesting. Don't you love cross browser compatibility work? I do.
The overall final solution isn't pretty, but it'll do for now. Time is of the essence here, and there were a lot of forms in this solution already using this ReadOnly Textbox approach, which is why adding asp:Labels and showing/hiding them as required was going to take too much time.
The requirement to store a css class in my codebehind is so horrible that it makes me cringe. It breaks every good approach to UI/Code separation that exists. However, this needed to be sorted in 0 time and with minimal extra coding (including declarative additions of 2938923 extra label fields!). At least I know what I'm doing is nasty, and sometimes that's all that counts.