蘋果瀏覽器Safari對html標籤submit按鈕的默認渲染

-webkit-appearance: none; 

 

上面的設置就告訴Safari不要使用默認渲染,使用咱們寫好的

 

有這麼一個webkit的私有屬性：

 

　　　　-webkit-appearance:none; /*去除input默認樣式*/

 使用這個以後select的小三角就消失了,能夠加上background: url('http://ourjs.github.io/static/2015/arrow.png') no-repeat scroll right center transparent;

添加該樣式，而且值爲'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