我的网站在iPhone / Safari浏览器上呈现得很好,但有一个例外:我的文本输入字段有一个奇怪的圆形样式,但在我网站的其他部分看起来并不好看。
有没有办法指示Safari(通过CSS或元数据)不对输入字段进行舍入并将其呈现为矩形?
答案 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