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