美文网首页
苹果手机input的button样式与安卓不同怎么办?

苹果手机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