首頁 > web前端 > css教學 > 如何在 iPhone/Safari 中停用圓角輸入元素?

如何在 iPhone/Safari 中停用圓角輸入元素?

Barbara Streisand
發布: 2024-10-30 16:16:26
原創
361 人瀏覽過

How Can I Disable Rounded Input Elements in 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板