如何修改移動設備按鈕默認樣式

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

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

並且即便你使用終極禁術 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: 戳這裏，發現更多可能。