Блог

Я испытываю трудности с установкой одинакового цвета текста для отключенных input и select элементов.

Пример:

 input:disabled,
select:disabled,
option:disabled {
  color: #b8b8b8;
}  

 <select disabled style="width: 50pt;">
  <option>123</option>
</select><br>
<input disabled value="123" style="width: 45pt;">  

Проверьте эту скрипку …

Как это можно исправить, чтобы получить тот же внешний вид, тот же отображаемый цвет?

Используйте Opacity:1 .

скрипка для обхода.

 input:disabled,
select:disabled,
option:disabled {
  color: #b8b8b8;
  opacity: 1;
}  

 <select disabled style="width: 50pt;">
  <option>123</option>
</select><br>
<input disabled value="123" style="width: 45pt;">  

Проблема в том, что при использовании атрибута disable свойство css opacity: 0.7 добавляется к стилю. Сделайте то же самое с полем ввода также или вы можете переопределить свойство css select тега с помощью opacity:1 !important , чтобы получить одинаковый стиль для обоих элементов

 input:disabled, select:disabled, option:disabled {
  color: #b8b8b8;
  opacity: 0.7;

}