文档章节

使用CSS3的appearance属性改变元素的外观

瑜
 
发布于 2015/04/08 18:31
字数 861
阅读 124
收藏 4

大家都知道每个浏览器对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的默认风格就被改变了,如图所示:

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

Webkit下的appearance属性值

checkbox
radiopush-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-toolboxtooltip
treeheadercell
treeheadersortarrow
treeitem
treetwisty
treetwistyopen
treeview
window

大家要是感兴趣的话可以看看下面的相关介绍:

  1. Mozilla Docs for -moz-appearance

  2. Trent Walton on Webkit Appearance

  3. Shaun Inman on Disabling Inner Text Shadow of Text Inputs on iPad

  4. CSS3 Spec

  5. CSS property: -webkit-appearance

最后在提醒大家一回,目前在IE系列和Opera浏览器上不支持“appearance”,而且Safari也只有3.0版本以上支持, 而在Chrome和Firefox以及移动设置浏览器上得到较好的支持。如果大家对此感兴趣,自己可以私下一个下个尝试上面的属性值,给大家带来何种效 果。


本文转载自:http://www.w3cplus.com/css3/changing-appearance-of-element-with-css3.html

瑜

粉丝 0
博文 1
码字总数 0
作品 0
海淀
私信 提问
加载中

评论(0)

使用CSS3的appearance属性改变元素的外观

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

大漠
2012/09/13
116
0
appearance—外观样式属性

appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 appearance是用来改变按钮和其他控件的外观,使其外观类似于原生控件。 例: <p class="lo...

刘谱_smile
2015/09/17
167
0
[CSS] input样式定制

input样式 定制一个泥团input,想怎么捏就怎么捏 appearance: none 所有主流浏览器都不支持 appearance 属性。 Firefox 支持替代的 -moz-appearance 属性。 Safari 和 Chrome 支持替代的 -w...

osc_mlkyurh7
2019/04/19
0
0
苹果IOS版safari一些坑

※本文设计到的属性都为IOS版的 safari 浏览器 -webkit-appearance : 消除输入框和按钮的原生外观,在iOS上加上这个属性才能给按钮和输入框自定义样式 。 注意:不同 type 的 input 使用这个...

osc_di3etjb0
2018/07/26
2
0
CSS3 鲜为人知的属性-webkit-tap-highlight-color的理解

(一)-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可...

osc_kh53eyum
2019/02/19
7
0

没有更多内容

加载失败,请刷新页面

加载更多

daily work report on May 25,2020

React-Native工程师 岗位要求 1、三年以上基于React-Native技术完成电商平台app混合开发实际工作经验,熟悉电商平台相关业务。 2、能熟练掌握React-Native,并能基于该技术独立完成相关工作,...

qwfys
25分钟前
23
0
HTTP/3 未来可期?

点击上方“朱小厮的博客”,选择“设为星标” 后台回复"加群",加入新技术 2015 年 HTTP/2 标准发表后,大多数主流浏览器也于当年年底支持该标准。此后,凭借着多路复用、头部压缩、服务器推...

osc_3b0dcpcm
27分钟前
8
0
【原创】JVM系列01 | 开篇

  20大进阶架构专题每日送达   1. Java 虚拟机是什么? 1.1 虚拟机   虚拟机:虚拟的计算机,一个用来执行虚拟计算机指令的软件。   虚拟机分为系统虚拟机和程序虚拟机。   系统虚...

osc_0k23td2u
28分钟前
8
0
Flink 1.10 细粒度资源管理解析

相信不少读者在开发 Flink 应用时或多或少会遇到在内存调优方面的问题,比如在我们生产环境中遇到最多的 TaskManager 在容器化环境下占用超出容器限制的内存而被 YARN/Mesos kill 掉[1],再比...

osc_n0c6719w
29分钟前
17
0
IDEA使用技巧-->查看继承关系

在开发中项目庞大的时候你会不知道当前类在项目中的使用情况,在哪被继承?在哪被实现?和谁有关联? 快捷键 eclipse中是: ctrl+tidea中是: ctrl+H点击当前类, 然后ctrl+H...

宇宝
30分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部