如何在 iPhone/Safari 中禁用圆角输入元素？

在 iPhone/Safari 中禁用圆角输入元素

iOS 设备上的 Safari 倾向于以圆角样式呈现文本输入字段，这可能不会始终与预期设计保持一致。为了解决这个问题，以下是如何指示 Safari 不要舍入输入字段并将其呈现为矩形：

对于 iOS 5 及更高版本：

1. CSS 样式：

使用 CSS 规则 border-radius: 0;删除所有输入字段上的圆角。

2. WebKit 外观：

对于搜索输入字段，请将 -webkit-appearance 属性设置为 none。

<code class="css">input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}</code>

对于旧版 Safari 版本：

WebKit 外观：

在旧版本的 Safari 中，对所有输入字段使用 -webkit-appearance: none 属性来删除圆角样式。

<code class="css">input {
  -webkit-appearance: none;
}</code>

注意：

• -webkit-border-radius: 0;属性只能用于 iOS 上的目标输入字段，但将来可能会被逐步淘汰。
• 首选方法是使用标准 border-radius 属性和 -webkit- 跨平台标准化圆角仅适用于 Safari 的外观属性。

以上是如何在 iPhone/Safari 中禁用圆角输入元素？的详细内容。更多信息请关注PHP中文网其他相关文章！