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

-webkit-appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 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.css88.com/webkit/-webkit-appearance/
注释:取值数据来自:http://ued.ctrip.com/webkitcss/prop/appearance.html

赞(1) 打赏
未经允许不得转载:WEB前端开发 » -webkit-appearance —— webkit外观样式属性

评论 3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    涨知识了

    袁源4年前 (2014-12-16)回复
  2. #-48

    学习了

    momognu3年前 (2015-08-21)回复
  3. #-47

    恨死苹果了,因为这个渲染的问题,搞了好久

    3年前 (2016-04-27)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏