如何修改移动设备按钮默认样式

Posted 2020-12-24 libinfs

在为移动设备制作网页的过程中，你可能会遇到下述奇怪的现象：当你为一个按钮设置样式，并在浏览器打开模拟器查看效果时，一切都很美好。

但当你使用真机测试时，你的按钮却变成了下面这个样子：

而且即使你使用终极禁术 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: 戳这里，发现更多可能。