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