搜索栏框阴影不在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; 
}