css - iOS Safari : (-webkit-)box-shadow on input:focus doesn't work

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 beta (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;
}