目前在项目中发现一个大坑,搞的我找了好久不知道因为什么,自用的reset.css中加入了 -webkit-appearance: none;其他所有表单没有出现问题,但checkbox会不显示,值改为checkbox或去掉该样式之后问题解决,不知道是否为浏览器更新之后出现的bug,因为以前并没有出现过类似问题。
chrome 68.0.3440.106(正式版本)
说明:
改变按钮和其他控件的外观,使其类似于原生控件。
- -webkit-appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
- 此属性非标准且渲染效果在不同浏览器下不同,有些属性值甚至不支持,请慎用。
语法:
-webkit-appearance:none | button | button-bevel ....
默认值:none
取值:
-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尚不明确