首页 > 建站教程 > CSS3+HTML5 >  css3 -webkit-appearance样式正文

css3 -webkit-appearance样式

今天,我爱模板网在element-plus中,使用原生的radio单选框,发现都不显示,F12一查看,发现宽高都是0,强制设置宽高也没用。但也没看到哪里设置了宽高,然后就发现了-webkit-appearance:none的样式,把它取消了或者设置为非none的值,就显示了。于是百度了下,得到下面的结论:


-webkit-appearance


说明:

改变按钮和其他控件的外观,使其类似于原生控件。

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

此属性非标准且渲染效果在不同浏览器下不同,有些属性值甚至不支持,请慎用。


语法:

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


默认值:none


取值:

-webkit-appearance取值代码效果介绍ChromeSafariiOS SafariAndroid 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尚不明确