I noticed that you can change the colour of text in textboxes which are disabled in Firefox applying a simple class but could not get a way to do it in IE 6/7. Does anyone out there have a elegant solution to achieve this.
+2
A:
You have two options (since IE 6/7 doesn't support the :disabled css-selector)
- Use jQuery (or some other js-lib of your choosing) and apply a class to all disabled input elements, say: $("input:disabled, textarea:disabled").addClass("is-disabled");
- Add the "is-disabled" class manually on the server side, this is of course only viable if you know before hand which elements will be disabled and which won't.
thr
2009-03-02 12:06:14
A:
Afaicr in the HTML it looks a little something like <textarea disabled="disabled"> right? You could get away with textarea[disabled="disabled"] in IE7 (might not work in IE6 however).
fredrikholmstrom's answer is the best cross-browser solution.
Ross
2009-03-02 12:15:30
+4
A:
I noticed that you can change the colour of text in textboxes which are disabled in Firefox
I think what the question is trying to say is that this:
<textarea disabled="disabled" style="color: red;">Hello</textarea>
Results in grey text in IE, vs. red in Fox. FWIW, Opera also gives grey, whilst the WebKit browsers give red.
This is a pure CSS issue to do with how much form fields are rendered according to the OS's widget set and how much according to the CSS rules. This has always been an area of great cross-browser difference. Scripting is not relevant, much though SO would like “use jQuery” to be the answer to every question.
The usual workaround is to use ‘readonly’ instead of ‘disabled’, then use styling (eg. based off ‘class="disabled"’) to reproduce whatever shaded disabled effect you want. ‘readonly’ controls are not turned into OS-level-disabled widgets, giving you more latitude to style them.
bobince
2009-03-02 13:09:42
Thanks for the explanation...but I have a futher question...How do I make other controls like CheckboxLists etc on the form ReadOnly as they dont seem to have this property on them.
chugh97
2009-03-02 13:56:34
Yes, readonly is only available for <textarea> and <input type="text"/"password">. <input type="checkbox"/"radio"> and other controls such as <select> can only be ‘disable’d — and have limited opportunities for styling in any case.
bobince
2009-03-02 14:57:41
A:
It should be noted that using the disabled attribute causes the underlying <input> element not to be submitted during a form submit, where as readonly controls are submitted to the server. Thus, you shouldn't use readonly if your server code isn't expecting a value from that control.
It's been my experience that trying to hack something to get an acceptable presentation usually isn't worth it. I'd suggest you either change your CSS so that the fixed IE disabled text styling doesn't conflict with your underlying control style, or you use styled text in place of the control (since disabled controls aren't successful for submission anyways). Work with the browser and not against it.