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

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