iOS safari：(-webkit-)box-shadow on input:焦点不起作用

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中设置任何东西，同样的效果也会发生。

它确实可以在Desktop-Safari上工作。我使用的是iOS 5测试版(iPad)，无法在稳定版本或其他设备上进行测试。

有人有解决这个问题的办法吗？

Answer 1

使用-webkit-外观: none覆盖本机外观：

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