user-select-none对input、textarea无效是浏览器规范强制行为，并非Bug；它仅作用于普通文本元素，对原生表单控件和contenteditable元素无效，需用pointer-events:none等补救措施。
user-select-none 类为什么对 input 和 textarea 无效
Bootstrap 5 的 user-select-none 类本身完全有效，但它只作用于普通文本容器（如 div、p、span），对原生表单控件（input、textarea、option）不起作用——这不是 Bug，而是浏览器规范强制行为：这些元素必须支持文本选择，CSS 层面无法覆盖。
常见误判是看到 input 里文字还能被选中，就以为 class 没生效。其实它压根就不该管这些元素。
- 检查开发者工具的 “Computed” 面板，确认
user-select值是否为none；如果是auto或text，说明样式被更高优先级规则覆盖 - 若目标是禁用整个容器（含内部表单），需单独处理表单控件，不能只靠父级加
user-select-none -
contenteditable="true"元素同理，CSS 的user-select对其无效
如何真正禁用指定容器内所有可选中文本
要确保容器及其子孙文本全部不可选，不能只依赖 user-select-none，得组合写法：
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.no-select input,
.no-select textarea,
.no-select [contenteditable] {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
pointer-events: none;
}注意最后两行：pointer-events: none 是关键补救措施，它让表单控件失去鼠标交互（从而无法触发选中逻辑），但会同时禁用点击和聚焦——所以仅适用于“纯展示型表单字段”，比如只读的 input[readonly] 或模拟输入框的 div。
立即学习“前端免费学习笔记（深入）”；
- 避免用
* { user-select: none; }，通配符性能差，且易误伤全局表单 - 更稳妥的是显式列出常用文本容器：
p, span, li, dt, dd, label, .title等 - 如果容器内有富文本或第三方组件（如 Quill、Tiptap），它们可能自带
user-select: text，需用!important覆盖
React/Vue 中动态切换时容易漏掉的细节
在框架中通过状态控制 user-select-none 开关，常见失效不是 class 没加，而是 DOM 复用导致样式残留或未更新：
- React 中用
useState切换 class，但子组件（尤其是dangerouslySetInnerHTML或插槽内容）没重新渲染，旧样式仍生效 - Vue 里用
v-show切换，只是display: none，class 还在，user-select仍参与计算 - 建议：对关键容器加
key强制重渲染（如<div key={isSelectable.toString()} class="user-select-none">），或 Vue 中改用v-if - 如果禁用的是
contenteditable区域，光加 CSS 不够，还得监听selectstart并preventDefault()
移动端长按菜单和可访问性风险
iOS Safari 上，即使加了 user-select-none，长按仍可能弹出系统菜单（复制/搜索等）。要彻底压制，得额外加：
.no-select {
-webkit-touch-callout: none;
}但更要紧的是别忘了可访问性：禁用选中不等于禁用访问。屏幕阅读器仍需能读取内容，键盘焦点仍需可达。如果给按钮文字加了 user-select-none，却没确保它有 tabindex="0"、role="button" 或 aria-label，辅助技术用户可能直接跳过它。
最麻烦的不是样式加不上，而是加了之后破坏了原本的交互链路——比如用户想双击复制某段提示文字，结果整个区域都不可选，又没提供替代操作（如「复制」按钮），体验就断了。
