css3的apprearance属性(转)
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的默认风格就被改变了,如图所示:
当然上面的属性只是“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
css3的apprearance属性(转)的更多相关文章
- CSS3外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者 ...
- 学习笔记:CSS3的filter属性
CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...
- CSS3利用text-shadow属性实现多种效果的文字样式展现
一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...
- css3.0新属性效果在ie下的解决方案(兼容性)
css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- css3 的box-sizing属性理解
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...
- css2和CSS3的background属性简写
1.css2:background:background-color || url("") || no-repeat || scroll || 0 0; css3: backg ...
- CSS3的box-sizing属性
盒模型的宽度,在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内 W3C标准中的盒模型宽度为内容宽度,不包括内边距paddin ...
随机推荐
- Python使用os.listdir()函数来获得目录中的内容
摘自:http://it.100xuexi.com/view/otdetail/20130423/057606dc-7ad1-47e4-8ea6-0cf75f514837.html 1.在Pyth ...
- 使用固件库操作STM32F4时的必要配置(转)
源:使用固件库操作STM32F4时的必要配置 使用STM32F4的固件库时,默认的晶振为25Mhz晶振,因此需要做一定的修改.之前因为一直没有注意这个问题,我捣腾了许久,发现工作时钟总是不对,查阅了一 ...
- Spring 与 mybatis整合 Error parsing Mapper XML. Cause: java.lang.NullPointerException
mapper配置文件中的namespace没有填:而且namespase的值应该填为:mapper的权限定名:否则还是会抛出异常 org.springframework.beans.factory.B ...
- 'customerService' for bean class [com.cd.service.business.customer.impl.CustomerService]
'customerService' for bean class [com.cd.service.business.customer.impl.CustomerService] 此处报错是因为我 把一 ...
- How to Iterate Over a Map in Java?(如何遍历Map)
1.Iterate through the "entrySet" like so: public static void printMap(Map mp) { Iterator i ...
- [Python]网络爬虫(四):Opener与Handler的介绍和实例应用
在开始后面的内容之前,先来解释一下urllib2中的两个个方法:info and geturl urlopen返回的应答对象response(或者HTTPError实例)有两个很有用的方法info() ...
- UIScreen的scale属性
用来表示显示屏的像素密度与点坐标系统之间的关系.通过该属性,我们可以把视图中逻辑坐标系统里的点坐标转换成设备的物理像素坐标.在配有Retina显示屏的设备中,scale值是2.0,而在非Retina显 ...
- Office2003/2010等集成SP的简单方法
Office2003集成SP的简单方法 需要准备的工具:Office 2003 光盘镜像.SP3更新包.Office 2003 序列号.UltraISO,7-zip或winrar,虚拟光驱 步骤一:提 ...
- HDU1102--Constructing Roads(最小生成树)
Problem Description There are N villages, which are numbered from 1 to N, and you should build some ...
- js 基础对象一
JavaScript 通常用于操作 HTML 元素. Document元素 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页 ...