在為移動設備制作網頁的過程中，你可能會遇到下述奇怪的現象：當你為一個按鈕設置樣式，并在瀏覽器打開模擬器查看效果時，一切都很美好。

但當你使用真機測試時，你的按鈕卻變成了下面這個樣子：

而且即使你使用終極禁術 border-radius: 0 !important 也還是沒用。

---

---

這是因為在移動設備中，各瀏覽器為一些基本控件（button，checkbox，scrollbarbutton-up）提供了一套符合原生系統界面風格的樣式，這些樣式是隱藏的，但優先級卻是最高的，高到你即使使用禁術 !important 也無法超越。

這顯然不科學。

別怕，我們有兩個非常靠譜的樣式聲明可以告知瀏覽器完全拋棄控件默認的樣式，以正常的方式計算我們的樣式表。

這兩個聲明分別是：

• -moz-appearance: none：用來取消基于 Gecko 引擎的瀏覽器（如Firefox）所提供的原生系統控件樣式；
• -webkit-appearance: none：用來取消基于 Webkit （如 Safari）和 Blink（如Chrome，Opera）引擎的瀏覽器所提供的原生系統控件樣式；

所以，你明白當你遇到文章開篇出現的奇怪現象應該怎么做了吧？直接兩個聲明走起啊少年！

---

最后，你也許會好奇，appearance 還有什么屬性值，戳這里看看MDN上怎么說吧。

PS: 戳這里，發現更多可能。

總結

以上是生活随笔為你收集整理的如何修改移动设备按钮默认样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。