如何去除移动设备上按钮、图片、文本框等出现的阴影

  • 2017-02-05
  • 10
  • 0
  1. 在手机等移动设备上点击 <input/> <button/> 等按钮、文本框,或者点击图片时,有的时候会出现一个半透明的灰色圆角背景;一开始以为是 outline 的问题,但是设置 outline 为 none 之后灰色圆角背景还在;
    后来才发现那个灰色圆角背景是 tap 后的高亮背景,要消除这个灰色背景,则需要将属性 -webkit-tap-highlight-color 的值设置为透明:

    a,img,button,input,textarea {
      -webkit-tap-highlight-color:rgba(255,255,255,0);
    }
    
  2. 在手机(iphone上有,android上还未发现)上 textarea, input 有默认的内阴影,出去该内阴影的方法如下:
    input,textarea {
      -webkit-appearance:none;
    }
    

评论

还没有任何评论,你来说两句吧