用css去除chrome、safari等webikt内核浏览器对控件默认样式

有这么一个webkit的私有属性:

 

    -webkit-appearance:none; /*去除input默认样式*/

 

添加该样式,并且值为'none'时即可取消浏览器对于控件的默认样式。

另外这个属性也有个神奇的地方~ 他可以用来调用显示浏览器对各种控件的默认样式,比如:

 

<span style="-webkit-appearance:button;"> 我是span啊亲!!</span>

 

那么他所显示的效果是:

  

 

 

 

 

哈 觉得挺有趣的~  另外这个属性可以用来去除Iphone上面那个恶心的超大圆角的按钮默认样式,从而使自己编辑的按钮样式显示正常。

 

下面是这个属性可能会有的值,也算是可以显示的浏览器控件默认效果。

  • 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

 

具体可以浏览这个网站,上面有对于这些效果的demo,狠狠地戳这:http://davidwalsh.name/webkit-appearance

 

posted @ 2012-08-23 17:09  ﹏風﹖﹍  Views(19788)  Comments(0Edit  收藏  举报