去掉ios下按钮的默认样式 -webkit-appearance

在做web移动端页面时我们常常会遇到这样的情况，设置好的按钮样式在安卓系统的手机下显示出预期效果，但到了苹果手机中却是另一种样式？What's wrong?

原来是苹果的safari下有着默认的按钮样式。比如，我们设置一个按钮：

.button{
    height: 40px;
    width: 100%;
    background: #ef4900;
    color: #fff;
    border: none;
}

<input type="button" class="button"  value="我的按钮" />

在安卓手机下显示是符合预期结果的:

但在苹果手机中,却是酱紫的~

这时在css样式上加 -webkit-appearance : none ; 去掉苹果手机的按钮默认样式，就可以使苹果手机下显示也达到预期了：

 

转载于:https://www.cnblogs.com/paul-myweb/p/5336206.html