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.

This is a good one! A subtle stacking order cross-browser issue... — Marc Audet, Jul 05 '13 at 16:16
That is sufficiently annoying. FYI I also see this on IE 11 but not on Edge. Another jsfiddle highlighting the problem: https://jsfiddle.net/ctn5j8m3/1/ — romellem, Jun 16 '16 at 14:01

score 19 · Accepted Answer · edited May 23 '17 at 11:54

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

score 9 · Answer 2 · answered Jul 05 '13 at 16:11

9

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

answered Jul 05 '13 at 16:11

Ilya Streltsyn

13,076
2
37
57

score -1 · Answer 3 · edited Aug 24 '17 at 11:33

-1

add a !important to your rule property:

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

edited Aug 24 '17 at 11:33

Ivan

34,531
8
55
100

answered Aug 24 '17 at 10:58

anonym

1

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

3 Answers3