关闭iPhone / Safari输入元素四舍五入

时间:2010-05-27 05:38:12

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

我的网站在iPhone / Safari浏览器上呈现得很好,但有一个例外:我的文本输入字段有一个奇怪的圆形样式,但在我网站的其他部分看起来并不好看。

有没有办法指示Safari(通过CSS或元数据)不对输入字段进行舍入并将其呈现为矩形?

11 个答案:

答案 0 :(得分:621)

在iOS 5及更高版本中,好的'border-radius可以解决问题:

input {
    border-radius: 0;
}

如果您必须仅移除iOS上的圆角或因某些原因无法规范跨平台的圆角,请使用带前缀的-webkit-border-radius属性,这仍然受支持。当然请注意,Apple可以随时选择放弃对前缀属性的支持,但考虑到其他特定于平台的CSS功能,它们可能会保留它。

在旧版本上,您必须设置-webkit-appearance: none

input {
    -webkit-appearance: none;
}

答案 1 :(得分:48)

input -webkit-appearance: none;单独无效。

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

答案 2 :(得分:34)

这是在IOS中删除舍入的最佳方法。

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

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

答案 3 :(得分:11)

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

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

答案 4 :(得分:7)

以下是Compass(SCSS)的完整解决方案:

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

答案 5 :(得分:6)

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

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

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

答案 6 :(得分:4)

我遇到了同样的问题但仅限于提交按钮。需要移除内部阴影和圆角 -

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

答案 7 :(得分:4)

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

之类的操作

这比.foo这样的单个类选择器具有更高的特异性,因此请注意,您不能只执行.my-field { -webkit-appearance: none; }。如果你没有更好的方法来达到正确的特异性,这将有所帮助:

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

答案 8 :(得分:4)

请尝试这个:

尝试像这样添加input Css:

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

答案 9 :(得分:3)

我使用了一个简单的border-radius:0;删除文本输入类型的圆角。

答案 10 :(得分:0)

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

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