Изменение цвета шрифта в текстовых полях в IE, которые отключены

Question

Я заметил, что вы можете изменить цвет текста в текстовых полях, которые отключены в Firefox, применяя простой класс, но не смогли найти способ сделать это в IE 6/7. У кого-нибудь есть элегантное решение для достижения этой цели.

Answer 1

Я заметил, что вы можете изменить цвет текста в текстовых полях, которые отключены в Firefox

Я думаю, что вопрос пытается ответить так:

<textarea disabled="disabled" style="color: red;">Hello</textarea>

Результаты в сером тексте в IE, против красного в Fox. FWIW, Opera также дает серый цвет, а браузеры WebKit - красный.

Это чисто проблема CSS, связанная с тем, сколько полей формы отображается в соответствии с набором виджетов ОС и сколько в соответствии с правилами CSS. Это всегда было большой разницей между браузерами. Сценарии не актуальны, хотя SO хотел бы, чтобы «использование jQuery» было ответом на каждый вопрос.

Обычный обходной путь - использовать «только для чтения» вместо «отключен», а затем использовать стили (например, на основе «класс =« отключен »») для воспроизведения любого затененного отключенного эффекта, который вы хотите. Элементы управления «только для чтения» не превращаются в виджеты с отключенным уровнем ОС, что дает вам больше возможностей для их стилизации.

Answer 2

Следует отметить, что использование атрибута disabled приводит к тому, что базовый элемент <input> не будет представлен во время отправки формы, где readonly элементы управления передаются на сервер. Таким образом, вы не должны использовать readonly, если код вашего сервера не ожидает значения от этого элемента управления.

По моему опыту, пытаться что-то взломать, чтобы получить приемлемую презентацию, обычно не стоит. Я бы посоветовал вам либо изменить свой CSS, чтобы фиксированный отключенный стиль текста в IE не конфликтовал с вашим базовым стилем элемента управления, либо использовать вместо элемента стилизованный текст (поскольку отключенные элементы управления в любом случае не удаются для отправки). Работайте с браузером, а не против него.

Answer 3

У меня была такая же проблема для <select> элементов в IE10, и я нашел решение:

http://jsbin.com/ujapog/90

Существует Microsoft psuedo-элемент, который позволяет изменять цвет текста:

select[disabled='disabled']::-ms-value {
    color: #000;
}

Правило должно быть само по себе, потому что в противном случае другие браузеры будут игнорировать все правило из-за синтаксической ошибки. См. http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx для других элементов Internet Explorer только psuedo.

РЕДАКТИРОВАТЬ: -ms-value псевдоэлемент был введен в IE10, поэтому не будет работать на более ранних версиях.

Answer 4

Проблема с IE в том, что он не может применить стиль для отключенного элемента управления, поэтому сначала нам нужно удалить его из наших текстовых полей, затем добавить наш стиль и отключить фокусирование на элементе управления. Я также пытался отменить привязку ('focus'), но это не сработало.

Поэтому я использовал JQUERY для этого:

var disabledControls = $("input:disabled, textarea:disabled");
    disabledControls.removeAttr('disabled');
    disabledControls.addClass("is-disabled");
    disabledControls.focus(function() {
    this.blur();
});

Класс CSS:

.is-disabled {
    background-color: #EBEBEB;
    color: black !important;   
}

Отлично работает в IE8 \ 9 и Chrome ...

Answer 5

Для имитации поведения отключенного поля можно использовать следующие строки:

// find all disabled fields
$("input:disabled, textarea:disabled, select:disabled").each(function(index){
    // add the class is_disabled
    $(this).addClass("is_disabled");
    // remove the attribut disabled
    $(this).removeAttr('disabled');
    // add new attribut readonly
    $(this).attr('readOnly', 'readOnly');
});
// on submit remove all fields which are still with class is_disabled
$('form').submit(function() {
    // find all fields with class is_isabled
    $("input.is_disabled, textarea.is_disabled, select.is_disabled").each(function(index){
        //  and remove them entirely
        $(this).remove();
    });
    return true;
});
// now don't let anyone click into the fields
// this will simulate the 'disabled' functionality
$('.is_disabled').click(function() {
  $('.is_disabled').blur();
});

Answer 6

Я также искал простое решение без сценариев. Следующее работает для меня в IE 8. Идея состоит в том, чтобы использовать прозрачность фона и фильтр для преобразования и раскраски текста. Это затемняет отключенный текст ровно настолько, чтобы сделать его читабельным.

textarea[disabled], select[disabled], input[type='text'][disabled] {    
  /*required*/
  background-color:transparent; 
  filter: light;

  /*fine tuning*/
  font-weight:100;
  font-family: Tahoma;
  border: 1px solid;
  letter-spacing:1px;
}

У select нет тени, поэтому сделайте текст очень толстым, чтобы получить похожее эффект шрифтового веса.

select[disabled] {
  font-weight:900;
}

Answer 7

Полагаю, вы можете написать CSS для этого, чем продолжать работу с JQuery. Я не проверял это. Но если вы отключите текстовое поле, оно должно позаботиться о стилях автоматически. Добавьте это в свою таблицу стилей и дайте мне знать ....

input[disabled][type='text'], textarea[disabled]{ color: rgb(0,0,0); background-color:Silver;}

Answer 8

Используйте наложение метки:

<asp:Label ID="lblTxtHider" runat="server" Text=""    CssClass="hidden" Enabled="false"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" CssClass="frmItem" Visible="false" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>

Тогда в CSS:

.disabledColorChanger {
position: absolute;
font-family: Arial;
font-size: 13px;
margin-top: 3px;
margin-left: 4px;
}
.disabledColorChanger[disabled] {
    display:none;
}

А в коде при настройке или отключении:

private void SetEnabled(bool enabled)
{
   lblTxtHider.Enabled = !enabled;
   TextBox1.Enabled = enabled;
   lblTxtHider.Text = TextBox1.Text;
}

И ИСПРАВЛЕННЫЙ код для обнаружения, т.е.:

<script>
    $(document).ready(function () {
        var isIE = /*@cc_on!@*/false || !!document.documentMode;
        if (isIE) {
            document.getElementById("<%=lblTxtHider.ClientID%>").className = "disabledColorChanger";
        }
    });
</script>

Просто установите метку = входное значение. У меня работает.

Answer 9

input [disabled] и input [readonly] работают в IE 7, 8 и 9 при добавлении этой строки в html-файл:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Answer 10

Afaicr в HTML это выглядит примерно как <textarea disabled="disabled"> верно? Вы можете обойтись без textarea[disabled="disabled"] в IE7 (однако может не работать в IE6).

fredrikholmstrom - лучшее кросс-браузерное решение.