如何在 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 外觀：

在舊版本輸入欄位使用-webkit-appearance: none 屬性來刪除圓角樣式。

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

注意：

• -webkit-border-radius: 0;屬性只能用於iOS 上的目標輸入字段，但將來可能輸入字段會被逐步淘汰。
• 首選方法是使用標準 border-radius 屬性和 -webkit- 跨平台標準化圓角僅適用於 Safari 的外觀屬性。

以上是如何在 iPhone/Safari 中停用圓角輸入元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！