Can't style input field in IE6, Why?

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

Try using

input[readonly] {
    // stuff
}

Answer 2

Attribute selectors don't work in IE6. If you use jQuery, however, it abstracts away the notion of attribute selections.

$('input[readonly="readonly"]').addClass('...') would work.

Answer 3

IE6 doesn't support attribute selectors, I think you just need to get rid of input[readonly='readonly'], this will probably solve your problem.

2 alternative solutions :

• Add a class attribute to your input (just like you did)
• Use Javascript.

Answer 4

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>