关闭iPhone/Safari输入元素的圆角化。

22 浏览
0 Comments

关闭iPhone/Safari输入元素的圆角化。

我的网站在iPhone/Safari浏览器上表现良好，唯一的例外是：我的文本输入字段有一个奇怪的圆角样式，与我的网站的其余部分完全不协调。

有没有一种方法可以通过CSS或元数据来指示Safari不要将输入字段进行圆角处理，以便按照预期呈现为矩形？

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

2 答案

0 Comments

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

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

0
0 Comments

\n\n在iOS 5及以上版本中：\n

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

\n如果您必须仅在iOS或由于某种原因无法在各个平台上标准化圆角，则可以使用input { -webkit-border-radius：0}属性来移除圆角，该属性仍然受支持。当然要注意的是，苹果公司随时可以选择停止对带有前缀的属性的支持，但考虑到他们的其他平台特定的CSS特性，它们可能会持续支持该属性。\n在旧版中，您必须设置更改为 -webkit-appearance：none：\n

input {
    -webkit-appearance: none;
}

0