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

Ответ 1

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

Смотрите этот комментарий Я написал по теме:

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

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

Ответ 2

Вы можете:

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

Ответ 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: зависание, вероятно, позаботится об этом.

Ответ 4

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

Ответ 5

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

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

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

Ответ 7

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

//Если IE

inputElement.writeAttribute( "unselectable", "on");

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

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

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

Ответ 8

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

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

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

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

Ответ 9

Это работает для того, чтобы отключить опцию выбора в качестве заголовков. Он не удаляет текстовую тень по умолчанию для опции: 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>

Ответ 10

Вы можете использовать только для readonly. Следующее сделало бы трюк для вас.

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

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

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