用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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM