Как изменить цвет шрифта для отключенного ввода?

Question

Мне нужно изменить стиль для отключенного элемента ввода в CSS.

<input type="text" class="details-dialog" disabled="disabled" />

Как я могу сделать это для Internet Explorer?

Answer 1

Вы не можете использовать Internet Explorer.

См. этот комментарий Я написал по соответствующей теме:

Кажется, нет хорошего пути, увидеть: Как изменить цвет отключенных элементов управления HTML в IE8 с помощью css - вместо этого вы можете установить вход readonly, но это последствия (например, с readonly, input будет отправлен на сервер при отправке, но с disabled не будет быть): http://jsfiddle.net/wCFBw/40

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

Answer 2

Вы можете:

input[type="text"][disabled] {
   color: red;
}

Answer 3

Следующее довольно близко познакомит вас с IE8 и работает в других браузерах.

В вашем html:

<input type="text" 
       readonly="readonly"    <!-- disallow editting -->
       onfocus="this.blur();" <!-- prevent focus -->
       tabindex="-1"          <!-- disallow tabbing -->
       class="disabledInput"  <!-- change the color with CSS -->
       />

В вашем CSS:

.disabledInput {
    color: black;
}

В IE8 при наведении курсора немного изменяется цвет границы.Некоторые CSS для input.disabledInput: hover, вероятно, могли бы позаботиться об этом.

Answer 4

input[disabled], input[disabled]:hover { background-color:#444; }

Answer 5

Заменить disabled на readonly="readonly". Я думаю, что это та же самая функция.

<input type="text" class="details-dialog" readonly="readonly" style="color: ur color;">

Answer 6

Кажется, никто не нашел решения для этого.У меня нет ни одного, основанного только на CSS, но с помощью этого трюка JavaScript я обычно могу обрабатывать отключенные поля ввода.

Помните, что отключенные поля всегда следуют стилю, который они получили до того, как стали отключенными.Таким образом, хитрость будет 1- Включение их 2-Изменение класса 3- Отключить их снова.Поскольку это происходит очень быстро, пользователь не может понять, что произошло.

Простой код JavaScript будет выглядеть примерно так:

function changeDisabledClass (id, disabledClass){
var myInput=document.getElementById(id);
myInput.disabled=false;             //First make sure it is not disabled
myInput.className=disabledClass;    //change the class
myInput.disabled=true;             //Re-disable it
}

Answer 7

Это работает для того, чтобы отключить опции выбора в качестве заголовков. Он не удаляет текстовую тень по умолчанию для опции: disabled, но он удаляет эффект наведения. В IE вы не получите цвет шрифта, но, по крайней мере, текстовая тень исчезла. Вот HTML и CSS:

select option.disabled:disabled{color: #5C3333;background-color: #fff;font-weight: bold;}
select option.disabled:hover{color:  #5C3333 !important;background-color: #fff;}
select option:hover{color: #fde8c4;background-color: #5C3333;}

<select>
     <option class="disabled" disabled>Header1</option>
     <option>Item1</option>
     <option>Item1</option>
     <option>Item1</option>
     <option class="disabled" disabled>Header2</option>
     <option>Item2</option>
     <option>Item2</option>
     <option>Item2</option>
     <option class="disabled" disabled>Header3</option>
     <option>Item3</option>
     <option>Item3</option>
     <option>Item3</option>
</select>

Answer 8

Вы можете использовать следующий стиль с непрозрачностью

input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {
    opacity: 0.85 !important;
}

или определенный класс CSS

.ui-state-disabled{
    opacity: 0.85 !important;
}

Answer 9

Это решение, которое я нашел для этой проблемы:

// Если IE

inputElement.writeAttribute («невыбираемый», «включен»);

// Другие браузеры

inputElement.writeAttribute («отключено», «отключено»);

Используя этот трюк, вы можете добавить таблицу стилей к элементу ввода, который работает в IE и других браузерах, в поле ввода, которое нельзя редактировать.

Answer 10

Вместо этого вы можете использовать readonly.Следующее поможет вам.

<input type="text" class="details-dialog" style="background-color: #bbbbbb" readonly>

Но вы должны отметить следующее.Зависит от требований вашего бизнеса, вы можете его использовать.

Элемент только для чтения не редактируется, но отправляется при отправке соответствующей формы.Отключенный элемент недоступен для редактирования и не отправляется при отправке.