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。

这是一个说明问题的最小例子:jsbin example

文本框应具有相同的背景颜色。当你悬停在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;
}

由于某些原因,IE10中的背景颜色属性的继承似乎与其他浏览器不同。

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

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

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

Bug与IE8

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

Input boxes with transparent background are not clickable in 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;
}
原文链接:https://www.f2er.com/css/218174.html

猜你在找的CSS相关文章