解决iOS Safari中按钮默认属性样式问题

2015-07-02 WEB-Front - 次浏览

问题描述

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

问题截图

解决方案

<input type="button" class="code-btn"/>
.code-btn {
    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上的默认样式问题。