Html 关闭iPhone/Safari输入元素舍入

我的网站在iPhone/Safari浏览器上呈现得很好，但有一个例外：我的文本输入字段有一种奇怪的圆形样式，与我的网站的其他部分相比，它一点都不好看

是否有方法指示Safari（通过CSS或元数据）不要将输入字段四舍五入，并按预期将其呈现为矩形？

在iOS 5及更高版本上：

输入{
边界半径：0；
}
输入[type=“search”]{
-webkit外观：无；
}

如果必须仅删除iOS上的圆角，或者由于某些原因无法跨平台标准化圆角，请改用

input{-webkit border radius:0；}

属性，该属性仍然受支持。当然要注意，苹果可以随时选择放弃对前缀属性的支持，但考虑到其他特定于平台的CSS功能，他们很可能会保留它

在旧版本上，您必须设置

-webkit外观：none

：

输入{
-webkit外观：无；
}

输入-webkit外观：无本身不起作用

尝试添加
-webkit边框半径：0px此外。
对于我来说，在iPhone 3GS的iOS 5.1.1上，我必须清除搜索字段的样式，并将其设置为预期的样式

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

正在执行
-webkit边界半径：0本身并没有清除本机样式。这同样适用于本机应用程序上的网络视图。
我也遇到了同样的问题，但只适用于提交按钮。需要去除内部阴影和圆角-

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }

我使用了一个简单的边界半径：0；删除文本输入类型的圆角。
以下是Compass（SCSS）的完整解决方案：

这是在IOS中删除圆角的最佳方法

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

注意：请不要将此代码用于选择选项。我们的选择会有问题。
如果使用normalize.css，该样式表将执行类似于
input[type=“search”]{-webkit外观：textfield；}
的操作

这比单个类选择器（如
.foo
）具有更高的特异性，因此请注意，您不能只执行
。我的字段{-webkit外观：none；}
。如果您没有更好的方法来实现正确的特异性，这将有助于：

.my字段{-webkit外观：无！重要；}
请尝试此字段：

尝试添加
input
Css，如下所示：

 -webkit-appearance: none;
       border-radius: 0;

被接受的答案使单选按钮在Chrome上消失。这项工作：

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}

为了在Safari和其他浏览器上正确呈现按钮，除了将webkit外观设置为“无”外，还需要为按钮提供特定的样式，例如：

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf

我确实需要将
-webkit border radius
属性添加到
以删除iOS 5中的圆角。不需要在iOS 5的0之后添加px，这只会删除内部阴影。查看Piyush的答案，也可以删除圆角。
-webkit外观实际上与内部阴影和圆角无关。不要仅仅为了这个而使用它。“如果IOS想要圆角和阴影，让IOS用户拥有它们”：这在我的情况下是完全不能接受的，可能在大多数其他人的情况下也是如此。！！你不应该使用这种方法，它使复选框似乎是不可用的，因为这，我的网站上的许多用户不进行付款协议。！！对于iOS 10上的
，我仍然需要
-webkit外观：无。请注意，
@包括边界半径（0）
mixin只有在您自己定义或使用Compass框架时才可用，而不仅仅是vanilla SASS。请注意，如果您使用的是SCSS，您可能也应该使用autoprefixer。我想知道为什么CSS重置似乎没有包含超级简单的CSS规则。我实际上是在eric meyer的CSS reset 2的基础上创建了一个CSS reset，添加了您在这里的答案中找到的必要CSS。它在github上可用：注意
-webkit外观：无，我认为最好将此条件限制在特定输入元素的范围内。否则，如果页面上有无线电输入元素，它可能会隐藏这些元素。我发现使用
input[type]
似乎对所有输入都有效。
border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf