css – background-color:inherit在IE 8/9/10上的input元素上不起作用

前端之家收集整理的这篇文章主要介绍了css – background-color:inherit在IE 8/9/10上的input元素上不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果我有一个明确的背景颜色设置的div和一个输入元素,背景颜色设置为’inherit’,那么它的工作原理如Chrome,Firefox和Safari,但不能在IE 8上工作, 9或10。 @H_403_2@这是一个说明问题的最小例子:jsbin example

@H_403_2@文本框应具有相同的背景颜色。当你悬停在div上时,div的背景颜色会改变,输入也应该改变。当您点击输入时,有一个覆盖继承的焦点规则。

解决方法

我可以通过使用以下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;
}
@H_403_2@由于某些原因,IE10中的背景颜色属性的继承似乎与其他浏览器不同。

@H_403_2@将背景颜色设置为透明而不是继承似乎可以工作。

@H_403_2@您可以在演示:http://jsfiddle.net/audetwebdesign/kTM2f/看到结果

@H_403_2@我希望我有更好的解释,但至少我们有一个工作。

@H_403_2@Bug与IE8

@H_403_2@我刚刚阅读以下相关问题:

@H_403_2@Input boxes with transparent background are not clickable in IE8

@H_403_2@在输入字段上设置background-color:transparent似乎禁用IE8中的输入字段。

@H_403_2@在这种情况下,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;
}

猜你在找的CSS相关文章