401

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

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

4

11 回答 11

698

在 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;
}
于 2010-05-27T05:39:39.657 回答
60

input -webkit-appearance: none;单独是行不通的。

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

于 2011-01-22T10:50:33.847 回答
46

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

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

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

于 2014-01-21T02:32:20.933 回答
11

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

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}
于 2016-03-16T17:52:00.763 回答
8

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

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

单独做-webkit-border-radius: 0;并没有清除原生样式。这也适用于本机应用程序上的 webview。

于 2012-08-23T16:59:06.827 回答
7

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

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}
于 2012-11-08T10:54:19.810 回答
5

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

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }
于 2012-09-05T16:55:54.147 回答
4

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

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

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

于 2015-02-09T11:04:19.607 回答
3

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

于 2012-10-12T01:15:53.497 回答
3

请试试这个：

尝试input像这样添加CSS：

 -webkit-appearance: none;
       border-radius: 0;
于 2015-09-18T05:40:54.070 回答
0

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

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf
于 2017-08-15T20:51:43.770 回答