用户选择属性
最后更新：2026-09-13
user-select 用户选择属性
user-select 用于控制用户是否可以用鼠标选中文本内容。当设置为 none 时，元素内的文本将无法被选中，常用于按钮、标签、图标等不需要被复制的 UI 元素，避免用户误选无关内容。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
user-select: auto | none | text | all;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
auto | none | text | all | 关键字 | 用户文本选择 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| user-select | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
提示： user-select 不是标准 CSS 属性，但浏览器支持广泛；为了兼容性，建议同时使用 -webkit-user-select 前缀。
注意： 在需要用户复制内容的场景（如代码块、引用文本）中不要设置 user-select: none，否则会影响可用性。
❓ 常见问题
Quser-select: all 有什么用？
Aall 让用户单击或第一次选择即可选中元素内的全部文本，不用拖动。适合邀请码、密钥、订单号、代码片段等需要「一键全选复制」的场景，能显著提升复制效率。注意它会覆盖子元素的 text/none 设置，整块内容作为一个选择单元。
Quser-select: none 能防止用户复制内容吗？
A不能。它是纯 UI 层的限制：鼠标拖拽选不中文字，但内容依然存在于 DOM 中，用户可通过查看源代码、开发者工具、甚至禁用 CSS 的方式获取。需要真正保护内容必须依赖后端权限控制。user-select: none 只用来提升界面体验（避免误选），不是安全手段。
Quser-select 和 ::selection 有什么区别？
Auser-select 控制「能不能选中」文本；::selection 控制「选中后长什么样」——背景色、文字颜色等。两者互补：user-select: text 允许选中，::selection 定义选中态样式，两者结合可定制品牌化的选中效果。
Q为什么需要写 -webkit-user-select 前缀？
Auser-select 长期是实验性属性，现代浏览器支持无前缀写法，但 Safari 和旧版 Chrome/Edge 曾要求 -webkit-user-select。为兼容旧内核，常同时写 -webkit-user-select、-moz-user-select 和无前缀三行。
🏷️ 相关属性
💡 相关案例
📚 相关教程
