Question

I know, I know IE6 right? Well no matter how strong the argument — I have to please IE6 at the moment.

I have a text input field. I was to style it’s font and background colors. But I can’t get IE6 to display the changes I’m altering. Here;s my markup and css.

<style>
    input[readonly='readonly'], input.readonly {
    color:red !important;
    background:#EBEBE4 !important;
    border:solid 1px #7F9DB9 !important;
    cursor:default;
}
</style>

and here is my form.

<form name="mainform" method="post" action="/link.aspx" id="mainform">
  <div class="section">
      <label for="shipFirstName">First Name:<abbr title="Required field">*</abbr></label>
      <input type="text" name="shipFirstName" id="shipFirstName" value="Rich" readonly='readonly' class='readonly' maxlength="13" />
      <label for="shipFirstName">Last Name:<abbr title="Required field">*</abbr></label>
      <input type="text" name="shipLastName" id="shipLastName" value="Sturim" readonly='readonly' class='readonly' maxlength="26" />
  </div>
</form>

I know the problem lies in the selectors

input[readonly='readonly'], input.readonly

But I’m not sure what I have to do to get IE6 to recognize the “readonly” class.

Any ideas?

Answer 1

IE6 gets confused by the input[readonly='readonly'] selector and will treat that entire rule as a syntax error. You’ll have to create two different rules to make it work:

<style>
    input[readonly='readonly'] {
    color:red !important;
    background:#EBEBE4 !important;
    border:solid 1px #7F9DB9 !important;
    cursor:default;
}
    input.readonly {
    color:red !important;
    background:#EBEBE4 !important;
    border:solid 1px #7F9DB9 !important;
    cursor:default;
}
</style>