解决苹果ios设备 safari浏览器中按钮圆角问题

Web前端开发 / 5470 次阅读

ios safari浏览器中，type="button"、type="submit"按钮会显示为圆角样式，要去掉圆角样式，通过给对应的CSS添加 -webkit-appearance:none; 就能解决。

281126046748421.png

示例：

HTML代码： 

<input type ="button" class ="btn" />
CSS代码： 

input .btn
{
    display : inline-block ;
    height : 30px ;
    line-height : 30px ;
    border : 0 ;
    cursor : pointer ;
    font-size : 15px ;
    color : #fff ;
    font-weight : bold ;
    border-radius : 5px ;
    padding : 0px 20px;
    overflow : visible ;
    -webkit-appearance : none ;  /*解决iphone safari上的圆角问题*/
}