关闭 iPhone/Safari 输入元素舍入答案

【问题标题】：Turn off iPhone/Safari input element rounding关闭 iPhone/Safari 输入元素舍入
【发布时间】：2011-02-24 12:16:54
【问题描述】：

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

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

【问题讨论】：

我想知道为什么 NO CSS 重置似乎包含那个超级简单的 CSS 规则。脑残了。
我实际上基于 eric meyer 的 css reset 2 创建了一个 CSS 重置，并在此处的答案中添加了必要的 css。它在 github 上可用：github.com/Jossnaz/JossiCssReset
小心-webkit-appearance: none;，我认为最好将此条件限制在特定输入元素的范围内。否则，如果页面上有单选输入元素，它可以隐藏它们。

标签： html css iphone mobile-safari css-reset

【解决方案1】：

在 iOS 5 及更高版本上：

input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}

如果您必须只删除 iOS 上的圆角，或者由于某种原因无法跨平台标准化圆角，请改用 input { -webkit-border-radius: 0; } 属性，该属性仍然受支持。当然请注意，Apple 可以随时选择放弃对前缀属性的支持，但考虑到其他特定于平台的 CSS 功能，他们可能会保留它。

在旧版本上，您必须改为设置 -webkit-appearance: none：

input {
    -webkit-appearance: none;
}

【讨论】：

从 iOS 5 开始，这只会移除内部阴影。检查 Piyush 的答案以删除圆角。
-webkit-appearance 实际上与内阴影和圆角无关。不要仅仅为此使用它。 css-infos.net/property/-webkit-appearance
“如果 IOS 想要圆角和阴影，让 IOS 用户拥有它们”：这在我的情况下是完全不能接受的，可能在大多数其他人的情况下也是如此。
!!你不应该使用这种方法，它使复选框似乎不可用因此，我的许多网站用户没有进行付款协议。!!
对于 iOS 10 上的 <input type="search">，我仍然需要 -webkit-appearance: none;。

【解决方案2】：

input -webkit-appearance: none; 单独不起作用。

尝试另外添加-webkit-border-radius:0px;。

【讨论】：

我确实需要将 -webkit-border-radius 属性添加到 <input type="text"> 以删除 iOS 5 中的圆角。
0后不需要加px

【解决方案3】：

在IOS中去除圆角是最好的办法。

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

注意：请不要将此代码用于选择选项。我们的选择会有问题。

【讨论】：

我发现使用input[type] 似乎对所有输入都有效。

【解决方案4】：

接受的答案使单选按钮在 Chrome 上消失。这有效：

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

【讨论】：

【解决方案5】：

对于我在 iPhone 3GS 上的 iOS 5.1.1 上，我必须清除搜索字段的样式并将其设置为预期的样式

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

单独执行-webkit-border-radius: 0; 并不能清除原生样式。这也适用于原生应用上的 webview。

【讨论】：

【解决方案6】：

这是 Compass (SCSS) 的完整解决方案：

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}

【讨论】：

请注意，@include border-radius(0); mixin 仅在您自己定义或使用 Compass 框架时才可用，而不仅仅是普通 SASS。
请注意，如果您使用的是 SCSS，您可能也应该使用 autoprefixer。

【解决方案7】：

我有同样的问题，但只是提交按钮。需要去除内阴影和圆角 -

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

【讨论】：

【解决方案8】：

如果您使用 normalize.css，该样式表将执行类似 input[type="search"] { -webkit-appearance: textfield; } 的操作。

这比.foo 之类的单个类选择器具有更高的特异性，因此请注意，您不能只使用.my-field { -webkit-appearance: none; }。如果您没有更好的方法来获得正确的特异性，这将有所帮助：

.my-field { -webkit-appearance: none !important; }

【讨论】：

【解决方案9】：

我使用了一个简单的边框半径：0；删除文本输入类型的圆角。

【讨论】：

【解决方案10】：

请试试这个：

尝试像这样添加input Css：

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

【讨论】：

【解决方案11】：

为了在 Safari 和其他浏览器上正确呈现按钮，除了将 webkit-appearance 设置为 none 之外，您还需要为按钮指定特定样式，例如：

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

【讨论】：