解决ios safari中按钮默认属性样式问题

分类:WEB前端发布时间:2015-07-02 18:14作者:乐潇游来源:LXYWEB热度:1336 ℃

问题描述

  使用html5编写网页在移动app中嵌套,总会涉及到按钮<input type="button" >的使用,在android手机浏览器中显示正常,但在ios safari浏览器中会看到按钮显示为圆角等一些默认样式,设置border-radius:0也不好使,其实添加css  “-webkit-appearance”就能解决问题。


问题截图

chris-retro-2-8.png  


< input type ="button" class ="codebtn" />

input.codebtn{
    display: inline-block;
    width: 75px; 
    height: 30px; 
    font-size: 14px;
    color: #fff; 
    background: #ff7900; 
    border: 0; 
    border-radius: 3px; 
    -webkit-appearance : none ;  /*解决iphone safari上的默认样式问题*/
}

总结

   使用css样式-webkit-appearance: none;  轻松解决iphone safari上的默认样式问题。