-webkit-appearance 是一个 不规范的属性(),它没有出现在 CSS 规范草案中。
最近认真看了一下文档,-webkit-appearance是用来改变按钮和其他控件的外观,使其外观类似于原生控件。
关于这个属性以前写过 解决iOS下无法正常渲染按钮的问题 ,问题产生的原因是,iOS下的safari中有默认的按钮样式:
input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: push-button; white-space: pre; }
其中-webkit-appearance: push-button;
就是将按钮设置成iOS中默认原生控件的样式。
通常我们可以在相应的元素上加上
-webkit-appearance : none ;
来移除原生控件样式。
其他几个比较有用的情况是,当我们希望某些元素设置成默写系统原生控件的样式的时候,例如下面的span标签设置成各种控件的样式:
按钮
等等
取值和兼容性参见:https://www.7psus5.com/webkit/-webkit-appearance/
注释:取值数据来自:
涨知识了
学习了
恨死苹果了,因为这个渲染的问题,搞了好久