有效，但非必须——button 默认不可选中文字，除非内部嵌套span、p等普通文本容器；真正需加user-select: none的是div+role="button"等语义非按钮的视觉按钮元素。
button 元素加 user-select: none 有效吗？
有效，但不是必须——button 默认就不可选中文字（除非它里面嵌套了 span、p 等普通文本容器）。真正需要加 user-select: none 的，是那些「视觉像按钮但语义不是」的元素，比如：div + role="button"、span 包裹的图标文字、自定义标签组件。
为什么 button 里文字还能被选中？
常见原因不是 button 本身问题，而是内部结构没处理好：
- 你在
button里写了<p>点击我</p>或<span>确认</span>，而只给button加了user-select: none—— 因为user-select不继承，子元素仍按默认值text处理 - 用了 CSS-in-JS 或 scoped style，样式没穿透到内部
span - 某些框架（如 Vue）动态渲染时复用了 DOM 节点，class 切换后旧样式残留
解决办法：要么给内部文字容器显式加 user-select: none，要么直接用纯文本写在 button 标签内（不包额外标签）。
移动端长按还是弹出菜单怎么办？
iOS Safari 长按时会绕过 user-select: none，直接触发系统复制菜单。单靠这一条 CSS 不够，必须补：
立即学习“前端免费学习笔记（深入）”；
-
-webkit-touch-callout: none—— 抑制 iOS 长按气泡菜单（仅对非表单元素生效） -
-webkit-user-select: none—— Safari/iOS 必须带前缀，否则可能不生效 - 如果按钮含链接行为（比如
a套button），记得加pointer-events: auto，避免父级pointer-events: none意外拦截点击
完整推荐写法：
.no-select {
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
user-select: none;
}
input 和 textarea 里怎么禁选？别试 user-select
user-select: none 在 input、textarea 上完全无效——浏览器规范明确忽略它。这不是 bug，是设计如此。
真要阻止用户选中其中文字，只有两条路：
- 加
readonly属性：既禁编辑，也自然失去文本选择焦点；再配cursor: default和浅灰背景，视觉上强化“不可操作”感 - 保持可编辑？那就接受现实：现代浏览器没有标准方式只禁选不禁编。别硬套
user-select，也别用pointer-events: none——它会废掉光标定位和键盘输入
最常被忽略的点是：你花时间调 user-select，其实该先问一句——这个字段真的需要用户编辑吗？很多时候，readonly 就是更干净、更可靠的选择。
