-webkit-appearance —— webkit外观样式属性

2024-08-31 20:58:48

-webkit-appearance —— webkit外观样式属性

-webkit-appearance 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

最近认真看了一下文档，-webkit-appearance是用来改变按钮和其他控件的外观，使其外观类似于原生控件。

关于这个属性以前写过解决iOS下无法正常渲染按钮的问题，问题产生的原因是，iOS下的safari中有默认的按钮样式：

css 代码:

input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: push-button;
white-space: pre;
}

其中-webkit-appearance: push-button;就是将按钮设置成iOS中默认原生控件的样式。

通常我们可以在相应的元素上加上

css 代码:

-webkit-appearance : none ;

来移除原生控件样式。

其他几个比较有用的情况是，当我们希望某些元素设置成默写系统原生控件的样式的时候，例如下面的span标签设置成各种控件的样式：

按钮

等等

取值和兼容性参见：http://www.css88.com/webkit/-webkit-appearance/
注释：取值数据来自：http://ued.ctrip.com/webkitcss/prop/appearance.html

最新文章

热门文章