iOS safari：输入中的（-webkit-）box-shadow：焦点不起作用

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，但只要元素获得焦点，阴影就会完全消失。如果您未设置任何内容，则会发生相同的效果：

它适用于Desktop-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;
}