Background-color: inherit не работает над элементом ввода в IE 8/9/10

Если у меня есть div с явным набором цветов фона и элементом ввода внутри него, с фоном-цветом, установленным на "inherit", тогда он работает так, как ожидалось, в Chrome, Firefox и Safari, но не работает IE 8, 9 или 10.

Вот минимальный пример, иллюстрирующий проблему: пример jsbin

Текстовое поле должно иметь тот же цвет фона. Когда вы наводите курсор на div, цвет фона div изменяется, и вход также должен измениться. Когда вы нажимаете на вход, существует правило: focus, которое переопределяет наследование.

Ответы

Ответ 1

Я смог получить тот эффект, который вам нужен, используя следующий CSS:

div.container {
    margin: 50px;
    padding: 10px;
    background-color: #aaa;
}
div.container input {
    background-color: transparent;
    border-width: 0;
}
div.container:hover {
    background-color: yellow;
}
div.container input:focus {
    background-color: white;
}

По какой-то причине наследование с использованием свойства фона в IE10, похоже, реализовано иначе, чем другие браузеры.

Настройка цвета фона transparent вместо inherit кажется сработала.

Вы можете увидеть результат в демо: http://jsfiddle.net/audetwebdesign/kTM2f/

Хотелось бы, чтобы у меня было лучшее объяснение, но, по крайней мере, у нас есть работа.

Ошибка с IE8

Я просто прочитал следующий связанный с этим вопрос:

Ящики ввода с прозрачным фоном не изменяются в IE8

Настройка background-color: transparent в поле ввода, похоже, отключает поле ввода в IE8.

В этом случае CSS должен быть более явной версией:

div.container {
    margin: 50px;
    padding: 10px;
    background-color: #aaa;
}
div.container input {
    background-color: #aaa;
    border-width: 0;
}
div.container:hover {
    background-color: yellow;
}
div.container:hover input {
    background-color: yellow;
}
div.container input:focus {
    background-color: white;
}

Ответ 2

Не будет ли фонового цвета: прозрачным быть приемлемым решением?

Ответ 3

добавьте !important к свойству правила:

input {
  background-color: inherit !important;
  border-width: 0;
}