<p>Safari ≤16.4 不支持标准 user-select: none，必须前置声明 -webkit-user-select: none，并补全 -moz-、-ms- 前缀及标准写法共四行；input 等表单元素默认忽略该属性，需显式重置为 text。</p>
为什么Safari里user-select: none完全没反应
因为 Safari ≤16.4（含 iOS 16.4 及更早）根本不识别标准写法 user-select: none，只认 -webkit-user-select: none。你写了标准属性却没加前缀，等于白写。
常见错误现象：
开发者工具里看到样式已加载，但文字照常可拖选、双击高亮；或者只在 macOS Safari 上失效，iOS 上反而“看起来有效”（其实是碰巧触发了其他机制）。
-
-webkit-user-select: none必须显式声明，且要放在所有user-select声明的最前面 - 漏掉
-moz-user-select: none会导致 Firefox for Android 或旧版桌面 Firefox 失效 - 构建工具（如 PostCSS autoprefixer）可能默认裁剪过时前缀，要确认它没把
-webkit-删掉 - 别用
* { user-select: none; }全局覆盖——Safari 对伪元素、::before/::after里的文本不继承该规则，还得单独设
四行声明顺序为什么不能错
浏览器解析 CSS 是从上到下匹配并覆盖，只认自己支持的那条。Safari 15.2 会跳过 user-select: none（不认识），但能解析 -webkit-user-select: none；如果标准写法写在前面，后面又没加前缀，就等于没设防。
必须写的四行，顺序固定：
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
-webkit-user-select: none—— Safari、iOS、Chrome ≤61、Edge Legacy 的唯一入口 -
-moz-user-select: none—— Firefox for Android 和 Firefox ≤68 必须项 -
-ms-user-select: none—— 旧 Windows Mobile WebView 或 Electron 旧内核可能依赖 -
user-select: none—— 放最后，供现代 Chrome/Firefox/Edge 使用，避免被前缀规则意外覆盖
input、textarea 这类元素为什么禁用不了
这不是 Safari 特有，而是所有浏览器的强制行为：<input>、<textarea>、contenteditable="true" 元素会直接忽略 user-select 属性。规范如此，不是 bug。
如果你在 body 上设了 user-select: none，又没重置表单控件，就会导致：
-
<input>无法定位光标、双击失焦 -
<select>下拉菜单点不动 - 自定义富文本容器（如
div[role="textbox"]）同样要显式设user-select: text
正确做法是显式重置：
input, textarea, select, button { user-select: text; }
[contenteditable="true"] { user-select: text; }
移动端长按仍弹出“复制”菜单怎么办
仅靠 CSS 在 iOS Safari 和 Android Chrome 中可靠性不足。除了补全前缀，还需叠加行为控制：
- 对非表单区域，可监听
touchstart并调用event.preventDefault()抑制长按菜单（注意：不能在input等可编辑元素上用） - 配合
touch-action: manipulation减少误触发 - 图片和 SVG 内联图标建议一并加
user-select: none，避免拖拽误触发 - Shadow DOM 内部需单独声明，外部样式不会穿透
真正容易被忽略的是：这个属性只阻断鼠标拖选和双击高亮，对右键、Ctrl+C、开发者工具、截图 OCR 完全无效——别把它当内容保护手段用。
