苹果手机input的button样式与安卓不同怎么办?

2018-03-12  本文已影响56人  AmazingMax

今天踩到坑了!写下一个 input type = button 的我,以为根本不可能出问题的。结果打开苹果手机打开一测,发现展示的是两个完全不同的样式。相信不少人遇到了这样的问题,今天我们来解决它。

一、问题案例

下面展示下不同操作系统的input type = button会有什么区别:


安卓手机下的效果
苹果手机下的效果

上面两张图可能排版有些不同,不用在意。
需要注意的是苹果手机自动给input type = button添加了自己的效果。

二、解决方案

我们添加几句代码来避免它,实现统一样式目的。

.item{
  outline:0px;
  -webkit-appearance: none; 
}

苹果手机上的input按钮自带效果,需要加上outline:0px; -webkit-appearance:none; 清除原有样式。
与此同时苹果手机上的input按钮自带圆角需要按需要去掉。

上一篇下一篇

猜你喜欢

热点阅读