-webkit-appearance改变按钮或其他空间的外观

2019独角兽企业重金招聘Python工程师标准>>>

概述：

-webkit-appearance 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。改变按钮和其他控件的外观，使其类似于原生控件。

语法：

-webkit-appearance：none | button | button-bevel ....

取值：

caps-lock-indicator	在密码字段中出现的大写字母锁定时，指示灯处于活动状态。
button	看起来像个按钮，以按钮的风格渲染
button-bevel	渲染成button-bevel的风格
caret	渲染成caret的风格
checkbox	渲染为input:checkbox样式的复选框按钮
default-button	渲染为default-button的风格
listbox	看起来像个清单盒子，以listbox风格渲染
listitem	看起来像个清单列表，以listitem风格渲染
media-fullscreen-button	渲染为media-fullscreen-button风格
media-mute-button	渲染为media-mute-button风格
media-play-button	渲染为media-play-button风格
media-seek-back-button	渲染为media-seek-back-button风格
media-seek-forward-button	渲染为media-seek-forward-button风格
media-slider	渲染为media-slider风格
media-sliderthumb	渲染为media-sliderthumb风格
menulist	渲染为menulist-menulist风格
menulist-button	渲染为menulist-button风格
menulist-text	渲染为menulist-text风格
menulist-textfield	渲染为menulist-textfield风格
none	去除系统默认appearance的样式,常用于IOS下移除原生样式
push-button	渲染为push-button风格
radio	看起来像个单选框，以radio单选框风格渲染
searchfield	看起来像个搜索框，以searchfield风格渲染
searchfield-cancel-button	渲染为searchfield-cancel-button风格
searchfield-decoration	渲染为searchfield-decoration风格
searchfield-results-button	渲染为searchfield-results-button风格
searchfield-results-decoration	渲染为searchfield-results-decoration风格
slider-horizontal	渲染为slider-horizontal风格
slider-vertical	渲染为lider-vertical风格
sliderthumb-horizontal	渲染为sliderthumb-horizontal风格
sliderthumb-vertical	渲染为sliderthumb-vertical风格
square-button	渲染为square-button风格
textarea	渲染为textarea风格
textfield	渲染为textfield风格
scrollbarbutton-down	渲染为scrollbarbutton-down风格
scrollbarbutton-left	渲染为scrollbarbutton-left风格
scrollbarbutton-right	渲染为scrollbarbutton-right风格
scrollbarbutton-up	渲染为scrollbarbutton-up风格
scrollbargripper-horizontal	渲染为scrollbargripper-horizontal风格
scrollbargripper-vertical	渲染为scrollbargripper-vertical风格
scrollbarthumb-horizontal	渲染为scrollbarthumb-horizontal风格
scrollbarthumb-vertical	渲染为scrollbarthumb-vertical风格
scrollbartrack-horizontal	渲染为scrollbartrack-horizontal风格
scrollbartrack-vertical	渲染为scrollbartrack-vertica风格

取值：

-webkit-appearance取值	代码效果	介绍	Chrome	Safari	iOS Safari	Android Browser
none		去除系统默认appearance的样式,常用于IOS下移除原生样式	支持	支持	支持	支持
button		渲染成button的风格	支持	支持	支持	支持
button-bevel		渲染成button-bevel的风格	支持	支持	不支持	不支持
caret		渲染成caret的风格	支持	支持	不支持	不支持
checkbox		渲染input:checkbox样式的复选框按钮	支持	支持	支持	支持
listbox		渲染为listbox样式的复选框按钮	支持	支持	支持	支持
listitem		渲染成listitem的风格	支持	支持	不支持	不支持
media-fullscreen-button		渲染成media-fullscreen-button的风格	不支持	不支持	不支持	不支持
media-mute-button		渲染成media-mute-button的风格	支持	支持	不支持	不支持
media-seek-back-button		渲染成media-seek-back-button的风格	不支持	支持	不支持	不支持
media-seek-forward-button		渲染成media-seek-forward-button的风格	不支持	支持	不支持	不支持
media-slider		渲染成media-slider的风格	支持	支持	不支持	不支持
media-sliderthumb		渲染成media-sliderthumb的风格	支持	支持	不支持	不支持
menulist		渲染成menulist的风格	支持	支持	不支持	不支持
menulist-button		渲染成menulist-button的风格	支持	支持	支持	不支持
menulist-text		渲染成menulist-text的风格	支持	支持	不支持	不支持
menulist-textfield		渲染成menulist-textfield的风格	支持	支持	不支持	不支持
push-button		渲染成push-button的风格	支持	支持	支持	支持
radio		渲染成radio的风格	支持	支持	支持	支持
searchfield		渲染成searchfield的风格	支持	支持	不支持	支持
searchfield-cancel-button		渲染成searchfield-cancel-button的风格	支持	支持	不支持	支持
searchfield-decoration		渲染成searchfield-decoration的风格	支持	支持	不支持	不支持
searchfield-results-button		渲染成searchfield-results-button的风格	不支持	支持	不支持	不支持
searchfield-results-decoration		渲染成searchfield-results-decoration的风格	不支持	支持	不支持	不支持
slider-horizontal		渲染成slider-horizontal的风格	支持	支持	支持	支持
slider-vertical		渲染成slider-horizontal的风格	支持	支持	支持	支持
sliderthumb-horizontal		渲染成sliderthumb-horizontal的风格	支持	支持	支持	支持
sliderthumb-vertical		渲染成sliderthumb-vertical的风格	支持	支持	支持	支持
square-button		渲染成square-button的风格	支持	支持	支持	支持
textarea		渲染成textarea的风格	支持	支持	不支持	支持
textfield		渲染成textfield的风格	支持	支持	不支持	支持
scrollbarbutton-down		渲染成scrollbarbutton-down的风格	不支持	不支持	不支持	不支持
scrollbarbutton-left		渲染成scrollbarbutton-left的风格	不支持	不支持	不支持	不支持
scrollbarbutton-right		渲染成scrollbarbutton-right的风格	不支持	不支持	不支持	不支持
scrollbargripper-horizontal		渲染成scrollbargripper-horizontal的风格	不支持	不支持	不支持	不支持
scrollbargripper-vertical		渲染成scrollbargripper-vertical的风格	不支持	不支持	不支持	不支持
scrollbarthumb-horizontal		渲染成scrollbarthumb-horizontal的风格	不支持	不支持	不支持	不支持
scrollbarthumb-vertical		渲染成scrollbarthumb-vertical的风格	不支持	不支持	不支持	不支持
scrollbartrack-horizontal		渲染成scrollbartrack-horizontal的风格	不支持	不支持	不支持	不支持
scrollbartrack-vertical		渲染成scrollbartrack-horizontal的风格	不支持	不支持	不支持	不支持

兼容性：

• 对应的firefox可以使用 -moz-appearance属性

• iOS 2.0及更高版本的Safari浏览器可用

• Android尚不明确

说明：本文档尚未完成，可能存在诸多不足，欢迎补充完善

转载于:https://my.oschina.net/mayanli/blog/391064