使用CSS3的appearance属性改变任何元素的浏览器默认风格


Posted in HTML / CSS onDecember 24, 2012

前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说,你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染成“输入框”、“选择框”等效果。

大家都知道每个浏览器对HTML元素渲染都不一样,比如说“button”,在chrome和ff中,渲染出来的效果都是不尽相同的。这样一来就有了今天这个思路,利用浏览器的对元素的默认渲染风格,我们可以使用“appearance”属性对任何元素的渲染风格改变,最简单的来说,我要把“a”链接默认显示成“按钮”风格,那么我们可以使用“appearance”设置为“button”。

“appearance”功能听起来蛮大的,不过可惜的是,目前各个浏览器厂商各自为政,还无法达到统一的标准,至今天也只有两个内核的浏览器可以使用,其一是“webkit”,其二是“ff”的,也就是说在使用“appearances”时,需要加上各浏览器厂前缀。

appearance使用方法

复制代码
代码如下:

.elmClass{
-webkit-appearance: value;
-moz-appearance: value;
appearance: value;
}

接下来我们一起来看个简单的实例:

复制代码
代码如下:

<p class="lookLikeAButton" >我是一个段落P元素 </p>
<p class="lookLikeAListbox" >我是一个段落P元素 </p>
<p class="lookLikeAListitem" >我是一个段落P元素 </p>
<p class="lookLikeASearchfield" >我是一个段落P元素 </p>
<p class="lookLikeATextarea" >我是一个段落P元素 </p>
<p class="lookLikeAMenulist" >我是一个段落P元素</p>

接下来,使用“appearance”属性来改变上面“P”元素的风格:
复制代码
代码如下:

/*看起来像个按钮,以按钮的风格渲染*/
.lookLikeAButton{
-webkit-appearance:button;
-moz-appearance:button;
}
/*看起来像个清单盒子,以listbox风格渲染*/
.lookLikeAListbox{
-webkit-appearance:listbox;
-moz-appearance:listbox;
}
/*看起来像个清单列表,以listitem风格渲染*/
.lookLikeAListitem{
-webkit-appearance:listitem;
-moz-appearance:listitem;
}
/*看起来像个搜索框,以searchfield风格渲染*/
.lookLikeASearchfield{
-webkit-appearance:searchfield;
-moz-appearance:searchfield;
}
/*看起来像个文本域,以textarea风格渲染*/
.lookLikeATextarea{
-webkit-appearance:textarea;
-moz-appearance:textarea;
}
/*看起来像个下接菜单,以menulist风格渲染*/
.lookLikeAMenulist{
-webkit-appearance:menulist;
-moz-appearance:menulist;
}

经过“appearance”的属性值设置后,段落P的默认风格就被改变了,如图所示:

使用CSS3的appearance属性改变任何元素的浏览器默认风格

当然上面的属性只是“appearance”中的一部分,我搜集了一下webkit和Mozilla下的appearance给大家参考:

Webkit下的appearance属性值

复制代码
代码如下:

checkbox
radio
push-button
square-button
button
button-bevel
listbox
listitem
menulist
menulist-button
menulist-text
menulist-textfield
scrollbarbutton-up
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbargripper-horizontal
scrollbargripper-vertical
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
caret
searchfield
searchfield-decoration
searchfield-results-decoration
searchfield-results-button
searchfield-cancel-button
textfield
textarea

Mozilla下的appearance属性值

复制代码
代码如下:

none
button
checkbox
checkbox-container
checkbox-small
dialog
listbox
menuitem
menulist
menulist-button
menulist-textfield
menupopup
progressbar
radio
radio-container
radio-small
resizer
scrollbar
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbarbutton-up
scrollbartrack-horizontal
scrollbartrack-vertical
separator
statusbar
tab
tab-left-edge Obsolete
tabpanels
textfield
textfield-multiline
toolbar
toolbarbutton
toolbox
-moz-mac-unified-toolbar
-moz-win-borderless-glass
-moz-win-browsertabbar-toolbox
-moz-win-communications-toolbox
-moz-win-glass
-moz-win-media-toolbox
tooltip
treeheadercell
treeheadersortarrow
treeitem
treetwisty
treetwistyopen
treeview
window

最后在提醒大家一回,目前在IE系列和Opera浏览器上不支持“appearance”,而且Safari也只有3.0版本以上支持,而在Chrome和Firefox以及移动设置浏览器上得到较好的支持。如果大家对此感兴趣,自己可以私下一个下个尝试上面的属性值,给大家带来何种效果。
HTML / CSS 相关文章推荐
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 #HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 #HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 #HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 #HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 #HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 #HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 #HTML / CSS
You might like
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
js中生成map对象的方法
2014/01/09 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
python使用fork实现守护进程的方法
2017/11/16 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
python实现验证码识别功能
2018/06/07 Python
Python----数据预处理代码实例
2019/03/20 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
会计电算化专业个人的自我评价
2013/11/24 职场文书
知识竞赛活动方案
2014/02/18 职场文书
测量工程专业求职信
2014/02/24 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
小学庆六一活动总结
2014/08/28 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
信访维稳工作汇报
2014/10/27 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
网吧温馨提示
2015/07/17 职场文书
运动员入场前导词
2015/07/20 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js