CSS 去掉点击时的选区和阴影

阅读(10430)

在移动设备下,点击链接时,会有一个响应点击的灰色区域;如果用户长按,还会出现一个“复制”等的弹框。
在某些场景下,去掉以上的系统响应可以通过如下代码:


<style type="text/css">
div,a,img {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select:none;
}
</style>

div 这些标签,也是需要一并加上的,取决于你的点击事件。

参考
tap-highlight-color:http://ued.ctrip.com/webkitcss/prop/tap-highlight-color.html
user-select 的MDN介绍:https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select
-webkit-touch-callout 的MDN介绍:https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout

Tags:

仅有 1 条吐槽

  1. Cloud Cloud

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

    iOS需要加这个监听,才可以生效。