Question

Opera自v10.5开始就支持box-shadow，但它不适用于输入元素。

input[type=text] {
    background-color: #fff;
    border: 1px solid #a0a0a0;
    box-shadow: inset 1px 1px 1px #d2d2d2;
    -o-box-shadow: inset 1px 1px 1px #d2d2d2;
}

<input type="text" name="test" />

此代码适用于Chrome和Firefox，我在OSX 10.6上使用Opera 11.01。任何人都可以帮忙解决这个问题吗？

Answer 1

它看起来像Opera中的一个错误（我只是报告了它）。你可以使用background: transparent;它会起作用（假设容器的背景也是白色的）。

此外，没有-o-box-shadow，Opera支持非前缀box-shadow属性，因为它实现了它。

Answer 2

它似乎确实是一个错误，但我有一个表单，它正在工作，无法弄清楚为什么 - 剥离它似乎添加border-radius使它出现（如果你仍然需要背景颜色并且不能使用Lea的解决方案） - 如果你不想要明显的圆角你可以使用1px半径

input[type=text] {
    background-color: #fff;
    border: 1px solid #a0a0a0;
    box-shadow: inset 1px 1px 1px #d2d2d2;
    border-radius: 1px;
}

Answer 3

Opera忽略了输入元素上的许多css属性。盒子阴影不是唯一的。文本阴影或文本转换也被忽略。

当您处理按钮时，使用按钮元素而不是输入可以是一种解决方案。

Answer 4

此外，如果您需要Lea解决方案的背景颜色，您可以再添加一个插入阴影，如此

box-shadow: inset 0 1px 4px -1px rgba(0, 0, 0, .7), /*actual shadow*/
inset 0 0 100px 0 #fff; /*just white background*/

歌剧镶嵌盒子阴影

4 个答案: