禁用移动端长按选中需设 user-select: none 并加前缀，同时对 input/textarea 等可编辑元素显式放行；长按菜单需结合 -webkit-touch-callout: none 和 contextmenu 事件拦截，但无法完全可靠屏蔽。
长按选中后出现蓝色背景盒，怎么关掉
移动端长按文字或元素时，浏览器默认会触发文本选择态，附带一个半透明蓝色背景（Android WebView）或高亮色块（iOS Safari），这不是伪类，而是系统级 selection 行为。关掉它不能靠 ::selection 覆盖，得从源头禁用选择能力。
最直接的方式是设置 user-select: none：
button, .tap-area {
user-select: none;
}注意：该属性需加浏览器前缀才能在旧版 Android 或 iOS 上生效：
-
-webkit-user-select: none（iOS ≤ 12.5、Android Chrome ≤ 61） -
-moz-user-select: none（Firefox Android） -
-ms-user-select: none（已废弃，但部分旧 WebView 仍依赖）
为什么加了 user-select: none 还能被选中
常见于父容器设了 user-select: none，但子元素显式覆盖为 user-select: text 或 auto —— 子元素会继承不了“禁止”，反而自己重新获得选择权。
立即学习“前端免费学习笔记（深入）”；
检查时重点看：
- 目标元素自身是否写了
user-select（哪怕值是inherit） - 是否用了
pointer-events: none混淆逻辑（它不阻止选择，只禁点击） - 是否在 JS 中调用了
window.getSelection().selectAllChildren()等主动触发行为
真要彻底锁死，建议在根容器（如 ）加 user-select: none，再对可编辑区域（<input>、<textarea></textarea>）单独放开：
body {
-webkit-user-select: none;
user-select: none;
}
input, textarea, [contenteditable] {
-webkit-user-select: text;
user-select: text;
}user-select: none 影响 input 和 textarea 吗
会影响 —— 如果父级设了 user-select: none，而 <input> 没显式重置，iOS Safari 下可能无法唤起键盘或光标不显示，Android 通常还好，但属于未定义行为。
必须显式放行的场景：
-
<input type="text">和<textarea></textarea>需要支持光标定位和文字选择 -
[contenteditable]元素需要用户编辑内容 - 富文本编辑器内部的可编辑区域
别图省事只写 * { user-select: none }，那等于把输入框也封死了。
长按弹出菜单（复制/搜索/翻译）怎么一并禁掉
user-select: none 只管视觉选择态，不影响长按触发的上下文菜单。要禁这个，得配合 touch-callout: none（iOS）和 touch-action: manipulation（部分 Android）：
.no-callout {
-webkit-touch-callout: none;
touch-action: manipulation;
}但要注意：
-
-webkit-touch-callout: none仅 iOS Safari 有效，且 iOS 16+ 已开始忽略它（出于可访问性考虑） -
touch-action: manipulation主要优化滚动/点击响应，对菜单无直接压制效果 - 真正可靠的方式是监听
contextmenu事件并preventDefault()，但长按触发的原生菜单不一定派发该事件（尤其 iOS）
所以，别指望 CSS 完全屏蔽菜单 —— 如果业务强要求，得接受 JS 干预 + 降级提示，比如长按时隐藏敏感文案，或改用自定义长按手势。
最常被忽略的一点：禁用选择后，屏幕阅读器可能无法聚焦或朗读某些区域。如果项目要过 WCAG，user-select: none 必须搭配 aria-live 或明确的 tabindex 控制可访问性流。
