appearance 说明
appearance 属性, 指为用户在不同的平台上,给用户提供元素在该环境中的用户标准界面。<允许您使元素看上去像标准的用户界面元素。> *现在所有主流浏览器都不支持appearance属性 Firefox 支持替代的 -moz-appearance 属性。 Safari 和 Chrome 支持替代的 -webkit-appearance 属性。属性值
normal 标准外观(默认值)<将元素呈现为常规元素。>
icon 图标<将元素呈现为图标(小图片)。>
window 窗口<将元素呈现为视口。>
作为特殊的窗口可以指定以下属性值
desktop 系统全体表示为窗口
workspace 包含其他窗口,窗口中可以显示应用程序或项目
document 显示用户文档
tooltip 显示临时帮助或信息
dialog 通知窗口
button 按钮<将元素呈现为按钮。>
作为特殊的按钮可以指定以下属性值
push-button 立体按钮
hyperlink 链接
radio-button 圆形边框按钮
checkbox 复选框
menu-item 菜单
tab 选项卡按钮
menu 菜单<将元素呈现为一套供用户选择的选项。>
作为特殊的菜单可以指定以下属性值
menubar 水平排列的菜单
pull-down-menu 选择性菜单
pop-up-menu popup菜单
list-menu 列表菜单
radio-group 单选按钮组
checkbox-group 复选框按钮组
outline-tree 目录树
range 范围调节按钮
field 将元素呈现为输入字段。
combo-box 组合框
signature 签名字段
password 密码字段
inherit 上层属性继承
※<>内容为其他网站转载内容
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> appearance </title> <style> div.prefix_appearance_normal { -moz-appearance:normal; -webkit-appearance:normal; -o-appearance:normal; -ms-appearance:normal; } div.prefix_appearance_icon { -moz-appearance:icon; -webkit-appearance:icon; -o-appearance:icon; -ms-appearance:icon; } div.prefix_appearance_window { -moz-appearance:window; -webkit-appearance:window; -o-appearance:window; -ms-appearance:window; } div.prefix_appearance_button { -moz-appearance:button; -webkit-appearance:button; -o-appearance:button; -ms-appearance:button; } div.prefix_appearance_menu { -moz-appearance:menu; -webkit-appearance:menu; -o-appearance:menu; -ms-appearance:menu; } div.prefix_appearance_field { -moz-appearance:field; -webkit-appearance:field; -o-appearance:field; -ms-appearance:field; } div.prefix_appearance_desktop { -moz-appearance:desktop; -webkit-appearance:desktop; -o-appearance:desktop; -ms-appearance:desktop; } div.prefix_appearance_workspace { -moz-appearance:workspace; -webkit-appearance:workspace; -o-appearance:workspace; -ms-appearance:workspace; } div.prefix_appearance_document { -moz-appearance:document; -webkit-appearance:document; -o-appearance:document; -ms-appearance:document; } div.prefix_appearance_tooltip { -moz-appearance:tooltip; -webkit-appearance:tooltip; -o-appearance:tooltip; -ms-appearance:tooltip; } div.prefix_appearance_dialog { -moz-appearance:dialog; -webkit-appearance:dialog; -o-appearance:dialog; -ms-appearance:dialog; } div.prefix_appearance_push-button { -moz-appearance:push-button; -webkit-appearance:push-button; -o-appearance:push-button; -ms-appearance:push-button; } div.prefix_appearance_hyperlink { -moz-appearance:hyperlink; -webkit-appearance:hyperlink; -o-appearance:hyperlink; -ms-appearance:hyperlink; } div.prefix_appearance_radio-button { -moz-appearance:radio-button; -webkit-appearance:radio-button; -o-appearance:radio-button; -ms-appearance:radio-button; } div.prefix_appearance_checkbox { -moz-appearance:checkbox; -webkit-appearance:checkbox; -o-appearance:checkbox; -ms-appearance:checkbox; } div.prefix_appearance_menu-item { -moz-appearance:menu-item; -webkit-appearance:menu-item; -o-appearance:menu-item; -ms-appearance:menu-item; } div.prefix_appearance_tab { -moz-appearance:tab; -webkit-appearance:tab; -o-appearance:tab; -ms-appearance:tab; } div.prefix_appearance_menubar { -moz-appearance:menubar; -webkit-appearance:menubar; -o-appearance:menubar; -ms-appearance:menubar; } div.prefix_appearance_pull-down-menu { -moz-appearance:pull-down-menu; -webkit-appearance:pull-down-menu; -o-appearance:pull-down-menu; -ms-appearance:pull-down-menu; } div.prefix_appearance_pop-up-menu { -moz-appearance:pop-up-menu; -webkit-appearance:pop-up-menu; -o-appearance:pop-up-menu; -ms-appearance:pop-up-menu; } div.prefix_appearance_list-menu { -moz-appearance:list-menu; -webkit-appearance:list-menu; -o-appearance:list-menu; -ms-appearance:list-menu; } div.prefix_appearance_radio-group { -moz-appearance:radio-group; -webkit-appearance:radio-group; -o-appearance:radio-group; -ms-appearance:radio-group; } div.prefix_appearance_checkbox-group { -moz-appearance:checkbox-group; -webkit-appearance:checkbox-group; -o-appearance:checkbox-group; -ms-appearance:checkbox-group; } div.prefix_appearance_outline-tree { -moz-appearance:outline-tree; -webkit-appearance:outline-tree; -o-appearance:outline-tree; -ms-appearance:outline-tree; } div.prefix_appearance_range { -moz-appearance:range; -webkit-appearance:range; -o-appearance:range; -ms-appearance:range; } div.prefix_appearance_combo-box { -moz-appearance:combo-box; -webkit-appearance:combo-box; -o-appearance:combo-box; -ms-appearance:combo-box; } div.prefix_appearance_signature { -moz-appearance:signature; -webkit-appearance:signature; -o-appearance:signature; -ms-appearance:signature; } div.prefix_appearance_password { -moz-appearance:password; -webkit-appearance:password; -o-appearance:password; -ms-appearance:password; } </style> </head> <body> <h4>主要属性</h4> <div class="prefix_appearance_normal">normal</div> <div class="prefix_appearance_icon">icon</div> <div class="prefix_appearance_window">window</div> <div class="prefix_appearance_button">button</div> <div class="prefix_appearance_menu">menu</div> <div class="prefix_appearance_field">field</div> <h4>window 组</h4> <div class="prefix_appearance_desktop">desktop</div> <div class="prefix_appearance_workspace">workspace</div> <div class="prefix_appearance_document">document</div> <div class="prefix_appearance_tooltip">tooltip</div> <div class="prefix_appearance_dialog">dialog</div> <h4>button 组</h4> <div class="prefix_appearance_push-button">push-button</div> <div class="prefix_appearance_hyperlink">hyperlink</div> <div class="prefix_appearance_radio-button">radio-button</div> <div class="prefix_appearance_checkbox">checkbox</div> <div class="prefix_appearance_menu-item">menu-item</div> <div class="prefix_appearance_tab">tab</div> <h4>menu 组</h4> <div class="prefix_appearance_menubar">menubar</div> <div class="prefix_appearance_pull-down-menu">pull-down-menu</div> <div class="prefix_appearance_pop-up-menu">pop-up-menu</div> <div class="prefix_appearance_list-menu">list-menu</div> <div class="prefix_appearance_radio-group">radio-group</div> <div class="prefix_appearance_checkbox-group">checkbox-group</div> <div class="prefix_appearance_outline-tree">outline-tree</div> <div class="prefix_appearance_range">range</div> <h4>field 组</h4> <div class="prefix_appearance_combo-box">combo-box</div> <div class="prefix_appearance_signature">signature</div> <div class="prefix_appearance_password">password</div> </body> </html>实例图
