background-color: inherit doesn't work on input element on IE 8/9/10

Question

If I have a div with an explicit background color set, and an input element inside it, with background-color set to 'inherit', then it works as expected on Chrome, Firefox and Safari, but doesn't work on IE 8, 9, or 10.

Here's a minimal example that illustrates the problem: jsbin example

The text box should have the same background color. When you hover over the div, the background color of the div changes, and the input should change as well. When you click into the input, there's a :focus rule which overrides the inherit.

Answer 1

I was able to get the effect that you wanted by using the following 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; } 

For some reason, inheritance with the background color property in IE10 seems to be implemented differently than other browsers.

Setting the background color to transparent instead of inherit seems to work.

You can see the result at the demo: http://jsfiddle.net/audetwebdesign/kTM2f/

I wish I had a better explanation, but at least we have a work around.

Bug with IE8

I just read the following related question:

Input boxes with transparent background are not clickable in IE8

Setting background-color: transparent on an input field seems to disable the input field in IE8.

In that case, the CSS would have to be the more explicit version:

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; } 

Answer 2

Won't background-color:transparent be the acceptable solution?