应用CSS3的appearance特性更改元素的外型的方式

日期:2020-10-18 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

前段時间在《修补iPhone上submit按钮bug》中详细介绍了应用“-webkit-appearance: none; ”来更改按钮在iPhone下的默认设置设计风格,实际上大家能够反过来思路,应用“appearance”特性,来更改任何元素的访问器默认设置设计风格,简易的说,你可使用“appearance”特性将“段落p”3D渲染成button的设计风格,还可以3D渲染成“键入框”、“挑选框”等实际效果。

大伙儿都了解每一个访问器对HTML元素3D渲染都不1样,例如说“button”,在chrome和ff中,3D渲染出来的实际效果全是不尽同样的。这样1来就有了今日这个思路,运用访问器的对元素的默认设置3D渲染设计风格,大家可使用“appearance”特性对任何元素的3D渲染设计风格更改,最简易的来讲,我要把“a”连接默认设置显示信息成“按钮”设计风格,那末大家可使用“appearance”设定为“button”。

“appearance”作用听起来蛮大的,但是可是的是,现阶段各个访问器厂商各有为政,还没法做到统1的规范,至今日也仅有两个核心的访问器可使用,其1是“webkit”,其2是“ff”的,也便是说在应用“appearances”时,必须再加各访问器厂前缀。

appearance应用方式:
CSS Code拷贝內容到剪贴板
  1. .elmClass{   
  2.    -webkit-appearance: value;   
  3.    -moz-appearance:    value;   
  4.    appearance:         value;   
  5. }  
接下来大家1起看来个简易的案例:
XML/HTML Code拷贝內容到剪贴板
  1. <p class="lookLikeAButton">我是1个段落P元素 </p>  
  2. <p class="lookLikeAListbox">我是1个段落P元素 </p>  
  3. <p class="lookLikeAListitem">我是1个段落P元素 </p>  
  4. <p class="lookLikeASearchfield">我是1个段落P元素 </p>  
  5. <p class="lookLikeATextarea">我是1个段落P元素 </p>  
  6. <p class="lookLikeAMenulist">我是1个段落P元素</p>  
接下来,应用“appearance”特性来更改上面“P”元素的设计风格:
XML/HTML Code拷贝內容到剪贴板
  1. /*看起来像个按钮,以按钮的设计风格3D渲染*/   
  2. .lookLikeAButton{   
  3.      -webkit-appearance:button;   
  4.      -moz-appearance:button;   
  5. }   
  6. /*看起来像个清单盒子,以listbox设计风格3D渲染*/   
  7. .lookLikeAListbox{   
  8.      -webkit-appearance:listbox;   
  9.      -moz-appearance:listbox;   
  10. }   
  11. /*看起来像个清单目录,以listitem设计风格3D渲染*/   
  12. .lookLikeAListitem{   
  13.      -webkit-appearance:listitem;   
  14.      -moz-appearance:listitem;   
  15. }   
  16. /*看起来像个检索框,以searchfield设计风格3D渲染*/   
  17. .lookLikeASearchfield{   
  18.      -webkit-appearance:searchfield;   
  19.      -moz-appearance:searchfield;   
  20. }   
  21. /*看起来像个文字域,以textarea设计风格3D渲染*/   
  22. .lookLikeATextarea{   
  23.      -webkit-appearance:textarea;   
  24.      -moz-appearance:textarea;   
  25. }   
  26. /*看起来像个下接菜单,以menulist设计风格3D渲染*/   
  27. .lookLikeAMenulist{   
  28.      -webkit-appearance:menulist;   
  29.      -moz-appearance:menulist;   
  30. }  
历经“appearance”的特性值设定后,段落P的默认设置设计风格就被更改了,如图所示:


自然上面的特性只是“appearance”中的1一部分,我收集了1下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


大伙儿如果感兴趣爱好的话能够看看下面的有关详细介绍:

  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

最终在提示大伙儿1回,现阶段在IE系列和Opera访问器上不适用“appearance”,并且Safari也仅有3.0版本号以上适用,而在Chrome和Firefox和挪动设定访问器上获得较好的适用。假如大伙儿对此感兴趣爱好,自身能够私底下1个下个尝试上面的特性值,给大伙儿带来何种实际效果。