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

libinfs

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

clipboard.png

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

clipboard.png

而且即使你使用终极禁术 border-radius: 0 !important 也还是没用。


clipboard.png


这是因为在移动设备中,各浏览器为一些基本控件(buttoncheckboxscrollbarbutton-up)提供了一套符合原生系统界面风格的样式,这些样式是隐藏的,但优先级却是最高的,高到你即使使用禁术 !important 也无法超越。

这显然不科学。

别怕,我们有两个非常靠谱的样式声明可以告知浏览器完全抛弃控件默认的样式,以正常的方式计算我们的样式表。

这两个声明分别是:

  • -moz-appearance: none:用来取消基于 Gecko 引擎的浏览器(如Firefox)所提供的原生系统控件样式;
  • -webkit-appearance: none:用来取消基于 Webkit (如 Safari)和 Blink(如Chrome,Opera)引擎的浏览器所提供的原生系统控件样式;

所以,你明白当你遇到文章开篇出现的奇怪现象应该怎么做了吧?直接两个声明走起啊少年!


最后,你也许会好奇,appearance 还有什么属性值,戳这里看看MDN上怎么说吧。

PS: 戳这里,发现更多可能。

阅读 639

和李先生探索 Web 开发世界
本专栏将以通俗易懂的方式,体系化地介绍Web开发中的各种技术。

我希望在 segmentfault 做一个严肃认真的专栏作者,如果我的文章对你有帮助,请点击文章下方“赞”或“赞赏支持”给我支持,十分感谢。

1.3k 声望
2.2k 粉丝
0 条评论
你知道吗?

我希望在 segmentfault 做一个严肃认真的专栏作者,如果我的文章对你有帮助,请点击文章下方“赞”或“赞赏支持”给我支持,十分感谢。

1.3k 声望
2.2k 粉丝
宣传栏