input在手机端点击会有阴影效果,在pc上点击会有蓝色框或者黄色框

tap后的背景高亮,要重设这个表现,则需要设置-webkit-tap-highlight-color为所需色彩,直接透明吧:

手机浏览器上按钮、图片、文本框点击进去时的阴影,加上下面的CSS样式就可以解决了。

a,img,button,input,textarea{
  -webkit-tap-highlight-color:rgba(255,255,255,0);
}

那么PC端点击的时候出现蓝色边框或者黄色边框呢?这个是outline在作怪:

input{
  outline:none;
}

补充:如何去掉textarea,input的默认样式(iOS上的圆角及内阴影等,Android未测试):

input,textarea{
  -webkit-appearance:none;
}

你可能感兴趣的:(input在手机端点击会有阴影效果,在pc上点击会有蓝色框或者黄色框)