Safari旧版（≤15.4）不支持标准user-select: none，必须写四行前缀声明且顺序为-webkit-、-moz-、-ms-、标准；input/textarea等可编辑元素内-webkit-user-select失效；移动端还需加-webkit-touch-callout: none禁用长按菜单。

为什么Safari加了user-select: none还是能选中

根本原因不是写漏了，而是 Safari（尤其是 ≤15.4）压根不认标准 user-select: none——它只响应 -webkit-user-select: none。哪怕现代版本已支持无前缀写法，旧版 Safari 仍会直接跳过整条规则，导致样式完全失效。

必须写的四行声明顺序不能错

浏览器解析 CSS 时按顺序覆盖，前缀属性必须在标准属性之前，否则 IE/Edge Legacy 可能因识别失败而丢弃整条规则。

• -webkit-user-select: none;（Safari/iOS 必须，iOS 15–16 长按仍可能短暂高亮，需额外处理）
• -moz-user-select: none;（Firefox ≤69 必须，否则忽略）
• -ms-user-select: none;（IE10+ / Edge Legacy，注意它不支持 all 或 contain）
• user-select: none;（最后放标准属性，避免被前缀覆盖）

input、textarea 和 contenteditable 元素上 -webkit-user-select 失效

Safari 对可编辑元素有硬性策略：-webkit-user-select: none 在 <input>、<textarea> 或 contenteditable="true" 容器内会被强制忽略。这不是 bug，是浏览器保障基础交互的机制。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 若需禁用某段“只读文本”，别用 <input readonly>，改用 <div contenteditable="false"> 并显式设 -webkit-user-select: none;
• 对真正需要编辑的表单控件，必须单独重置：input, textarea { -webkit-user-select: text; }
• Firefox 在 contenteditable 里对 -moz-user-select: none 支持极差，建议统一设为 text 再用 JS 控制选区

移动端长按菜单没消失？还得加 -webkit-touch-callout

-webkit-user-select: none 只阻止文字高亮和光标出现，但 iOS Safari 长按时仍会弹出“复制”“搜索”气泡菜单——这是另一个独立行为，必须靠 -webkit-touch-callout: none 关闭。

立即学习“前端免费学习笔记（深入）”；

• 两者必须同时存在，缺一不可：-webkit-user-select: none; + -webkit-touch-callout: none;
• 仅对非表单区域使用；若加在按钮或卡片上，记得排除 input、textarea 等子元素，否则用户无法输入
• 某些安卓定制系统（如华为 EMUI）不响应该声明，此时只能监听 touchstart 并 event.preventDefault()，但会同步阻断滚动

真正的难点不在写几行 CSS，而在于判断「这个元素在 Safari 里到底算不算‘文本容器’」：有时加个 outline: 0 或删掉 tabindex="-1"，-webkit-user-select 就突然生效了——这种边界情况，调试时得真机连 Safari Web Inspector 看实时 computed styles。