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

Question

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

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

Answer 1

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

input {
    border-radius: 0;
}

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

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

input {
    -webkit-appearance: none;
}

"如果IOS需要圆角和阴影,让IOS用户拥有它们":这在我的情况下是完全不可接受的,并且可能在大多数其他人中也是如此. (10认同)
对于iOS 10上的`<input type ="search">`,我仍然需要`-webkit-appearance:none;`. (8认同)
`-webkit-appearance`实际上与内阴影和圆角无关.不要仅仅为此使用它.http://css-infos.net/property/-webkit-appearance (6认同)
!!你不应该使用这种方法，它使复选框似乎不可用因此，我的许多网站用户没有进行付款协议。！！ (2认同)

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

以下是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框架时才可用,而不仅仅是vanilla SASS. (14认同)

Answer 6

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

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

-webkit-border-radius: 0;单独做就没有清除原生风格.这也是本机应用程序的webview.

Answer 7

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

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