iOS下移除按鈕原生樣式

標籤：

 

按鈕樣式，在 Android 手機瀏覽器中顯示正常，但在 iOS Safari 瀏覽器中會看到按鈕顯示為圓角樣式，設定 border-radius:0; 也不好使。

這是因為iPhone、iPad 裝置上的 Safari 解析 input[type=”submit”] 和 input[type=”reset”] 按鈕會以蘋果瀏覽器的預設 UI 渲染，這樣就出現了我們不需要的樣式。

解決（蘋果瀏覽器的預設 UI 渲染）的方法是在 CSS 按鈕樣式代碼中添加一行css代碼（重設按鈕的樣式）：　

1 -webkit-appearance:none;

在 CSS 代碼中添加  “-webkit-appearance: none;”是告訴瀏覽器按鈕 不 按 照 蘋果瀏覽器的預設 UI 來渲染。

通常，在 CSS 中添加以下整合代碼：

1 input[type="text"],2 input[type="submit"],3 input[type="reset"],4 input[type="button"],5 button{outline:0;　　-webkit-appearance:none;}

 

iOS下移除按鈕原生樣式