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

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

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

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

如何修改移动设备按钮默认样式相关推荐

css修改select下拉列表的默认样式
select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div><select name=""> &l ...
修改输入框placeholder的默认样式
一般网页中都用到input的placeholder属性,想让这个默认样式和网页保持一致,就需要重新设定样式,百度百度: :-moz-placeholder { / color: #000; opaci ...
Altium的原理图主题修改为Orcad的默认样式（Altium原理图样式更改）
Altium默认的封装看久了总感觉不如Orcad的舒服,PCB的3D理应花里胡哨,但原理图还是该走极简主义.下面通过一些修改,将Altium的原理图样式更改为与Orcad相同. 过程看起来略微复杂,但 ...
html select样式修改,select标签的默认样式修改
在项目中,用到select标签,需要对select标签自定义样式. 在chrome浏览器中会对select有一个默认的border-radius,并且无法去掉. 可以通过下面的方法来解决: 1.需要通 ...
修改Bootstrap的一些默认样式
有些时候bootstrap的展示不能满足自己的需要,可以手动加一些样式来控制展示一个input有两个label左边一个,右边一个.control-label默认是右对齐的,放在左边是没问题,如果放在 ...
项目中如何修改UI框架的默认样式
我们在使用elementUI时,只能使用框架自带的样式,普通的修改方法并不能实现,我整理了下面几种修改样式的方法. 1. 行内修改样式通过在行内设置style修改,用于局部组件块 <el-bu ...
(Select)解决：Element-ui 中的 Select 组件用(深度)选择器修改默认样式不生效的问题及如何使用 popper-append-to-body=“false“ 属性
1.存在修改默认样式不生效问题的展示: A.问题一:虽然通过深度选择器修改了下拉框的背景等样式问题却没有展示: B.问题二:渲染后的 dom 元素并不在 #app 元素内部: // 发现:修改下拉框默 ...
bootstrap分页css样式,修改bootstrap-table中的分页样式
使用bootstrap-table时,使用$("")选择器没办法选中下方的分页button按钮,可能跟它是动态生成的有关吧. 最终找到与之对应的js(bootstrap-table ...
用css去除chrome、safari等webikt内核浏览器对控件默认样式
有这么一个webkit的私有属性: -webkit-appearance:none; /*去除input默认样式*/ 添加该样式,并且值为'none'时即可取消浏览器对于控件的默认样式. 另外这个属性 ...

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

如何修改移动设备按钮默认样式相关推荐

最新文章

热门文章