【问题标题】:opera inset box-shadow歌剧插入框阴影
【发布时间】:2011-03-23 05:53:34
【问题描述】:

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。有人可以帮忙解决这个问题吗?

【问题讨论】:

  • 好像是歌剧的bug

标签: opera css


【解决方案1】:

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

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

【讨论】:

    【解决方案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;
    }
    

    【讨论】:

    • 在歌剧伟大的黑客克莱尔苏兹中使用边界半径可以正常工作
    【解决方案3】:

    Opera 忽略了输入元素上的许多 CSS 属性。 Box-shadow 并不是唯一的一个。 Text-shadow 或 text-transform 也会被忽略。

    在处理按钮时,使用按钮元素代替输入可能是一种解决方案。

    【讨论】:

      【解决方案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*/
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2012-10-17
        • 2015-05-27
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多