首頁 > web前端 > css教學 > 如何刪除 iPhone/Safari 上文字輸入欄位的圓角?

如何刪除 iPhone/Safari 上文字輸入欄位的圓角?

DDD
發布: 2024-10-30 11:57:02
原創
352 人瀏覽過

How to Remove Rounded Corners from Text Input Fields on iPhone/Safari?

在iPhone/Safari 上停用輸入元素舍入

某些網站可能會遇到這樣的問題:文字輸入欄位在iPhone / 上出現不需要的圓角Safari 瀏覽器。這可能與網站的預期設計相衝突。

CSS 解決方案

要專門在Safari 上刪除圓角,而不影響其他瀏覽器,請修改輸入元素的樣式使用CSS:

<code class="css">input {
  -webkit-border-radius: 0;
}</code>
登入後複製

用於搜尋輸入的附加CSS

對於搜尋輸入字段,需要附加屬性:

<code class="css">input[type="search"] {
  -webkit-appearance: none;
}</code>
登入後複製

舊版iOS 版本

舊版iOS 版本

<code class="css">input {
    -webkit-appearance: none;
}</code>
登入後複製

對於舊版iOS 版本(iOS 5 之前的版本),請使用以下CSS 屬性:

注意: 對於為了相容於不同瀏覽器和平台,請考慮使用border-radius 屬性標準化圓角,因為Apple 將來可能會不再支援帶有前綴的-webkit-border-radius 屬性。

以上是如何刪除 iPhone/Safari 上文字輸入欄位的圓角?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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