Не могу стилизовать поле ввода в IE6, почему?

Question

Я знаю, я знаю IE6, верно? Ну, независимо от того, насколько сильный аргумент - я должен порадовать IE6 на данный момент.

У меня есть поле для ввода текста. Я должен был стилизовать его цвета шрифта и фона. Но я не могу заставить IE6 отображать изменения, которые я изменяю. Вот моя разметка и CSS.

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

и вот моя форма.

<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>

Я знаю, что проблема заключается в селекторах

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

Но я не уверен, что мне нужно сделать, чтобы IE6 распознал класс «только для чтения».

Есть идеи?

Answer 1

IE6 запутается в селекторе input[readonly='readonly'] и будет рассматривать все это правило как синтаксическую ошибку. Вам нужно будет создать два разных правила, чтобы заставить его работать:

<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>

Answer 2

Попробуйте использовать

input[readonly] {
    // stuff
}

Answer 3

IE6 не поддерживает селекторы атрибутов, думаю, вам просто нужно избавиться от input[readonly='readonly'], это, вероятно, решит вашу проблему.

2 альтернативных решения:

• Добавьте атрибут класса к вашему input (так же, как вы это сделали)
• Используйте Javascript.

Answer 4

Селекторы атрибутов не работают в IE6. Однако если вы используете jQuery, он абстрагируется от понятия выбора атрибутов.

$('input[readonly="readonly"]').addClass('...') будет работать.