搜索栏框阴影无法在iOS上呈现？

Question

我已经创建了一个旨在用于iOS应用程序的搜索栏。下面是它在浏览器中呈现的方式（我希望它如何）：

这是它在iOS上呈现的方式：

似乎完全忽略了盒子阴影。以下是使用的代码：

#search-content input[type="text"] {
    border-radius: 75px;
    font-size: .75em;
    width: 100%;
    padding: .6em .9em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
    box-shadow: 0 0 0 1px #bababa, 0 0 0 2px #fff, inset 0 0 10px rgba(0, 0, 0, 0.17);
    outline: none;
    border: 0;
    color: #656565;
}

如果有人能让我知道为什么会这样，我真的很感激。

谢谢！

Answer 1

将-webkit-appearance: none;添加到您的输入字段：

#search-content input[type="text"] {
    border-radius: 75px;
    font-size: .75em;
    width: 100%;
    padding: .6em .9em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
    box-shadow: 0 0 0 1px #bababa, 0 0 0 2px #fff, inset 0 0 10px rgba(0, 0, 0, 0.17);
    outline: none;
    border: 0;
    color: #656565;
    -webkit-appearance: none;
}