苹果浏览器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