CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-8
Elbin
Elbin

Reputation: 532

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

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.

Upvotes: 21

Views: 14130

Answers (3)

anonym
anonym

Reputation: 1

add a !important to your rule property:

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

Upvotes: -1

Marc Audet
Marc Audet

Reputation: 46825

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

Upvotes: 19

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13556

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

Upvotes: 10

Related Questions