当前位置: 首页 > Web前端 > CSS

如何修改移动端按钮的默认样式

时间:2023-03-30 23:31:58 CSS

在为移动端制作网页的过程中,您可能会遇到以下奇怪的现象:当您为某个按钮设置样式,并在浏览器中打开模拟器查看时效果,Everythingisbeautiful。但是当你在真实设备上测试它时,你的按钮看起来像这样:即使你使用最终禁止的border-radius:0!important它仍然不起作用。这是因为在移动设备中,每个浏览器都为一些基本控件(button、checkbox、scrollbarbutton-up)提供了一套符合原生系统界面风格的样式。这些样式是隐藏的,但具有最高优先级。高到就算是禁术也无法超越!重要。这显然是不科学的。别担心,我们有两个非常可靠的样式声明,它们告诉浏览器完全丢弃控件的默认样式并以正常方式评估我们的样式表。这两个声明是:-moz-appearance:none:用于取消基于Gecko引擎的浏览器(如Firefox)提供的原生系统控件样式;-webkit-appearance:none:用于取消基于Webkit(如Safari)和Blink(如Chrome、Opera)引擎浏览器提供原生系统控件样式的样式;那么,遇到文章开头出现的怪现象应该怎么办,你就明白了吧?让我们直接看这两个陈述,男孩!最后,大家可能会好奇,外观还有哪些属性值,点这里看看MDN是怎么说的。PS:点击此处发现更多可能性。