Question

I’ve got a simple form on a webpage (that doesn’t actually submit any info), anyway in terms of layout it is as follows:

input output output
input output output
input output output
total total total

Each of the output and total fields have their own class (.disabledbox) and I have styled this as follows(CSS). They are all “disabled” form boxes:

.disabledbox {    
border:none;
text-align:center;
background-color:#ccc;
color:#000000;
}

Here’s the HTML for said form:

<input name="text" id="text1"  disabled="disabled" class="disabledbox" value="£ 0"/>
    <input name="text" id="text2" disabled="disabled" class="disabledbox" value="£ 0"/>

My problem is that on the output fields I want the colour of the output to be black, this works fine in FF and Chrome but my problem is that I need to also support my nemesis IE6 (as that’s what the majority of users here have) but for some reason in IE6 it just will not accept the style. Am I doing something wrong?

Answer 1

The “disabled” style of the input is “hardcoded” in IE6 and can not be overridden. I’d suggest not to use disabled inputs here. You have two alternatives:

1. Use readonly instead: <input name="text" id="text1" readonly="readonly" class="disabledbox" value="£ 0"/>

2. Don’t use inputs. You can just use a <div> or <span> and set its innerHTML instead. You can style the <span> or <div> anyway you like.