文档章节

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

欢乐小金鱼
 欢乐小金鱼
发布于 2015/03/24 23:33
字数 1315
阅读 42
收藏 0

概述:

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

语法:

-webkit-appearancenone | 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尚不明确

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

本文转载自:http://www.css88.com/webkit/-webkit-appearance/

欢乐小金鱼
粉丝 9
博文 14
码字总数 6977
作品 0
海淀
程序员
私信 提问
使用CSS3的appearance属性改变元素的外观

前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用“appearance”属性,来改变任何元素的...

大漠
2012/09/13
108
0
使用CSS3的appearance属性改变元素的外观

大家都知道每个浏览器对HTML元素渲染都不一样,比如说“button”,在chrome和ff中,渲染出来的效果都是不尽相同的。这样一来就有 了今天这个思路,利用浏览器的对元素的默认渲染风格,我们可...

2015/04/08
112
0
Input 标签 安卓 与 IOS 出现圆角 显示

Input 标签 input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; } outline:0px; -webkit-appearance:none; 清除原有样式,同时苹果手机......

昊诚
01/08
0
0
解决ios safari中按钮圆角问题

问题描述   使用html5编写页面在移动app中嵌套,总会涉及到按钮的使用,在android手机浏览器中显示正常,但在ios safari浏览器中会看到按钮显示为圆角样式,设置border-radius:0也不好使,...

GIFCOOL
2015/06/05
204
1
输入框input类型为number时,去掉上下箭头

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -moz-appearance: textfield; }......

灰白发
2018/08/02
64
0

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部