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

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

Ответ 3

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

http://jsbin.com/ujapog/90

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

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

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

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

Ответ 4

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

Поэтому я использовал 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...

Ответ 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();
});

Ответ 6

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

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

Ответ 7

Я также искал простой, без скриптов решение. В 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 не имеет тени, поэтому текст очень толстый, чтобы получить аналогичную эффект font-weight.

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

Ответ 8

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

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

Ответ 9

вход [отключен], а вход [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">

Ответ 10

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

<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 = /*@[email protected]*/false || !!document.documentMode;
        if (isIE) {
            document.getElementById("<%=lblTxtHider.ClientID%>").className = "disabledColorChanger";
        }
    });
</script>

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

Ответ 11

У вас есть два варианта (поскольку IE 6/7 не поддерживает: css-селектор отключен)

• Используйте jQuery (или какой-либо другой js-lib по вашему выбору) и примените класс ко всем заблокированным элементам ввода, например: $( "input: disabled, textarea: disabled" ). addClass ( "is-disabled" );
• Добавить класс "отключен" вручную на стороне сервера, это, конечно, только жизнеспособно, если вы знаете перед собой, какие элементы будут отключены, а какие нет.