去掉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 ; 去掉苹果手机的按钮默认样式,就可以使苹果手机下显示也达到预期了: