iOS safari：(-webkit-)box-shadow on input：focus 不起作用

Question

Safari对box-shadow有一些奇怪的行为。

input[type="text"]{
    -webkit-box-shadow: 0 0 8px #000000;
    box-shadow: 0 0 8px #000000;
}
input[type="text"]:focus{
    outline: none;
    -webkit-box-shadow: 0 0 8px #ffffff;
    box-shadow: 0 0 8px #ffffff;
}

显示box-shadow，但一旦元素聚焦，阴影完全消失。如果你在:focus中没有设置任何内容，也会产生同样的效果。

它在桌面safari上工作。我使用的是iOS 5测试版(iPad)，我无法在稳定版本或其他设备上进行测试。

有人有解决办法吗?

Answer 1

使用-webkit-appearance: none来覆盖本地外观:

input[type="text"]{
    -webkit-appearance: none;
    -webkit-box-shadow: 0 0 8px #000000;
    box-shadow: 0 0 8px #000000;
}