ios UIWebView上的Textfield css内部阴影

Question

目前我正在实施网站的移动版本。

在iOS 7.1 safari 或 UIWebView 上，显示

然而我的预期输出是（在 android浏览器上也是正确的）

你可以看到文本框的上半部分在iOS上有一个内部阴影。

我所做的是将 box-shadow 设置为无。然而，阴影仍然存在。

任何人都有关于这个问题的想法吗？

这是CSS代码

input, textarea {
    box-shadow: none;
    background-color: transparent;
    border: 1px solid #EEE;
}

Answer 1

要从输入字段中删除内部阴影，请添加-webkit-appearance: none;，它将从输入字段中删除内部阴影。此 DEMO 已在safari iOS7上测试过。

input[type="text"], textarea {
  display:block;
  -webkit-appearance: none; /*this property remove the inner shadow*/
   border-radius:1px;
  background-color: white;
  height:24px;
}

<强>更新

虽然使用-webkit-appearance: none;和-webkit-appearance: caret;有问题，但另一种方法是使用透明背景图片。或使用渐变。使用渐变的另一个例子。 DEMO 就在这里。

input[type="text"], textarea
{
 background-color: white;
height:24px;
-webkit-tap-highlight-color: rgba(0,0,0,0);/*remove the grey highlight appears once touching an element.*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
  /*Chrome,Safari4+ */

background: -webkit-linear-gradient(top, rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
}

Answer 2

试试这个

input, textarea {
    box-shadow: none !important;
    background-color: transparent;
    border: 1px solid #EEE;
}