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

作者: AmazingMax | 来源:发表于2018-03-12 18:27 被阅读56次

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

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

安卓手机下的效果

苹果手机下的效果

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

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

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

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

网友评论

本文标题：苹果手机input的button样式与安卓不同怎么办？

本文链接：https://www.haomeiwen.com/subject/zlkofftx.html

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