码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-07-24 13:59:04      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:checkbox   分享图片   式表   develop   测试   科学   方式   eve   check   

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

技术分享图片

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

技术分享图片

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


技术分享图片


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

这显然不科学。

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

这两个声明分别是:

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

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


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

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

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

标签:checkbox   分享图片   式表   develop   测试   科学   方式   eve   check   

原文地址:https://www.cnblogs.com/libinfs/p/9359398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!