如何在移动Safari浏览器上拥有透明，无轮廓和无边框的输入字段?

Question

我想让iPhone上Safari上的输入字段看起来像这个JS FIDDLE。目前我已经尝试过这个，它没有产生我想要的：

.input
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;  
border:none;
border-color: transparent;
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid grey;
width: 250px;
}

这些字段看起来像 Safari 桌面上小提琴中的输入，只是不在手机上。

Answer 1

这个答案应该是你要找的。对于 iOS5+，您可以使用border-radius属性删除圆角，对于旧版本，可以使用-webkit-appearance属性删除圆角。所以你的CSS看起来像这样：

.input {
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid grey;
width: 250px;
border-radius: 0;
-webkit-appearance: none;
}

新小提琴：https://jsfiddle.net/ct5s8pr9/

Answer 2

我需要添加-webkit-border-radius：0px;