PhoneGap的输入字段看起来与chrome不同

Question

此图片不是原始图片，我采用了镀铬外观，并添加了phonegap（在ipad上）与gimp（图像编辑器）的额外行。

在Chrome（Ripple扩展）上的PhoneGap模拟器中不会发生这种情况。

那么为什么会出现这条额外的线？是否有任何css属性可以让它消失？

这是使用的css：

.input_field
{
  font-size:20;
  border-style:solid;
  border-color:#E2E2E2; 
  border-width:1; 
}

这是HTML代码：

<input type="text" class="input_field" id="system_serial_number" style="width:100%"/>

Answer 1

您可以在css文件中尝试此代码input {-webkit-appearance: none;}。

如果有效，您可以在此处找到有关appearance css属性的更多信息

https://css-tricks.com/almanac/properties/a/appearance/