user-select: none 并非万能开关，其生效受浏览器前缀、优先级覆盖、元素类型（如表单控件强制忽略）、Shadow DOM 作用域及移动端兼容性等多重限制，需针对性处理。
直接写 user-select: none 很可能无效，尤其在表单控件、移动端或 Shadow DOM 中——它不是“一设就灵”的开关，而是受继承、覆盖、浏览器策略和元素类型多重制约的样式声明。
为什么 user-select: none 经常不生效
常见错误现象：样式加了，但 <input> 仍可双击选中、iOS 长按还是弹出“复制”菜单、Vue 组件里 class 切换后没反应。
- 没写全前缀：
-webkit-user-select: none（Safari/iOS 必需）、-moz-user-select: none（Firefox）、-ms-user-select: none（旧 Edge），缺一不可 - 被更高优先级规则覆盖：比如某个
.form-input类里写了user-select: text，就会盖掉父级的none - 目标元素本身是可编辑的：
<input>、<textarea>、contenteditable="true"元素会无视user-select，这是浏览器强制行为 - 用在 Shadow DOM 外部时，样式不会穿透；Web Components 内必须在 shadow root 里单独声明
如何正确作用于表单控件
全局设 body { user-select: none } 后，<input> 无法聚焦光标、<select> 下拉项点不动——这不是 bug，是你误用了语义。
- 禁止选择 ≠ 禁止输入，对表单控件必须单独重置：
input, textarea, select { user-select: text; } - 如果真要禁用某一个
<input>的文本选择（比如只读展示型输入框），得加pointer-events: none，但注意：这会让点击失效，且无法获得焦点 - 更稳妥的做法是改用
<div contenteditable="false">替代，并显式设user-select: none，避免触发浏览器对表单元素的特殊逻辑
移动端和 React/Vue 中的典型坑
iOS Safari 对 selectstart 事件基本不触发，Android Chrome 双击高亮有时绕过 CSS —— 单靠样式在移动场景下可靠性不足。
立即学习“前端免费学习笔记（深入）”；
- 移动端必须叠加
-webkit-user-select: none，且建议用touchstart+preventDefault()抑制长按（仅限非表单区域） - React 中用
useState切换no-selectclass，若子组件是富文本渲染器（如 Draft.js、Tiptap），DOM 可能没重绘，样式不生效；可加key={isSelectable.toString()}强制刷新 - Vue 中用
v-show切换样式无效（display: none 不移除样式），换成v-if或确保响应式数据确实变化（比如用ref而非普通对象属性） - 禁用选择后，别忘了检查键盘导航：加
tabindex="0"和role="button"等语义，否则屏幕阅读器用户会“看不见”该区域
别把它当安全措施用
user-select: none 只影响鼠标/触摸的主动选中行为，对 Ctrl+A、开发者工具、网络面板、页面源码、甚至截图 OCR 都毫无防御力。
- 用户按 F12 → 禁用样式 → 文本立刻可选；或者直接执行
getSelection().toString()拿到所有已渲染文本 - 想防复制？JS 拦截
copy事件只是心理安慰，禁用 JS 就失效；真正敏感的内容该走服务端渲染、权限控制或图片化（但牺牲 SEO 和无障碍） - 最常被忽略的一点：设了
user-select: none却没配::selection { background: transparent; }，拖选后残留高亮色块，视觉上反而暴露了“这里本该能选”
