美文网首页饥人谷技术博客
移动端点击阴影去掉、新增点击(pressed)样式

移动端点击阴影去掉、新增点击(pressed)样式

作者: 抓住时间的尾巴吧 | 来源:发表于2016-12-09 09:50 被阅读392次

    移动端一些按钮、图片在点击的时候,背景会自带阴影,这个时候想要给他去掉,就需要在点击的内容上加上 -webkit-tap-highlight-color:

    /*关键代码*/ -webkit-tap-highlight-color: transparent;

    图片按钮,点击(pressed)状态下更换图片,或者是其他样式,都一样的处理办法

    .input-area .send-area .gift.close:active{ -webkit-transition-duration: 0s; -moz-transition-duration: 0s; transition-duration: 0ms; background-image: url(./imgs/2X/gift_close_2x_pressed.png); background-image: -webkit-image-set(url(./imgs/2X/gift_close_2x_pressed.png) 1x,url(./imgs/2X/gift_close_2x_pressed.png) 2x,url(./imgs/3X/gift_close_3x_pressed.png) 3x);}

    移动端active状态下会有延迟,需要长按才会显示,这个时候,可以在js中加入

    document.body.addEventListener('touchstart', function () { });

    相关文章

      网友评论

        本文标题:移动端点击阴影去掉、新增点击(pressed)样式

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