Border radius在iOS Safari上无法运行于按钮上。

14 浏览
0 Comments

Border radius在iOS Safari上无法运行于按钮上。

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

是否有一种方法可以通过CSS或元数据指示Safari不要将输入字段圆角化，使它们呈矩形状态，如预期的那样呈现？

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

input -webkit-appearance: none; 仅仅使用这一句是不行的。

请再加上 -webkit-border-radius:0px;。

0
0 Comments

在iOS 5及之后的版本中：

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

如果您必须仅在iOS上移除圆角或由于某种原因不能规范化多平台的圆角，请改用input { -webkit-border-radius: 0; }属性，该属性仍然受支持。当然，请注意，苹果公司随时可以选择停止支持前缀属性，但考虑到其其他特定平台的CSS特性，他们可能会保持其兼容性。

在旧版上需设置-webkit-appearance: none：

input {
    -webkit-appearance: none;
}

0