user-select: none 单独使用常无效，因其不继承、对表单控件无效且 ios 长按时仍触发菜单；需配合 -webkit-user-select 等前缀、-webkit-touch-callout: none、readonly 属性及语义化处理。
user-select: none 是最直接有效的方案，但只加这一条 CSS 绝对不够——多数失效案例都源于忽略继承性、表单控件特殊性或移动端兼容细节。
为什么只写 user-select: none 常常没用
它不继承。父元素设了 user-select: none，子元素（比如 <span></span>、<em></em>）默认仍是 text，照样能被选中。
更常见的是：你给整个 <div class="card"> 加了禁用，里面嵌了个 <code><input type="text">，结果输入框里的文字照常可选——这不是 bug，是浏览器规范行为：user-select 对原生表单控件无效。
另外，Safari on iOS 在长按文本时仍可能弹出系统菜单，哪怕 CSS 已生效。
input 和 textarea 怎么真正禁选
别在它们身上白费劲写 user-select: none，直接放弃这条路。
真实可用的组合是：
- 设
readonly属性 —— 这是最轻量、最可靠的方式，既阻止编辑，也自然失去文本选择焦点 - 配合视觉降级：加
background: #f5f5f5; cursor: default;，让用户感知“不可操作” - 如果必须保持可编辑（极少见），那就接受现实：
user-select无解；现代浏览器没有标准 API 能只禁选不允编辑 - 慎用
pointer-events: none：它会同时禁掉聚焦、输入、光标定位，实际体验比“可选”还差
跨浏览器兼容写法要一次性写全
仅写 user-select: none 在旧版 Edge 或 Firefox 68 以下会失效。必须补全前缀：
.noselect {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
注意：-moz-user-select: -moz-none 是过时写法，已不推荐；* { ... } 全局重置风险极高——会把 <input>、<button></button>、<select></select> 全部锁死，用户连点击按钮都困难。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
移动端 Safari 长按仍触发菜单怎么办
iOS WebKit 对 user-select: none 的响应有延迟，长按大概率唤出“复制/查找/翻译”菜单。
必须额外加一条：
.noselect {
-webkit-touch-callout: none;
}
这条只对 Safari on iOS / iPadOS 有效，不影响其他浏览器。
如果禁用后链接也不可点了，记得给 <a></a> 单独加 pointer-events: auto 覆盖。
真正麻烦的从来不是“怎么写”，而是“写在哪”和“写给谁”。user-select 不是开关，它是一层策略——得配合元素语义、交互意图和浏览器实现差异一起判断。表单控件永远是特例，别试图用 CSS 统一解决。
