免费在线CSS user-select生成器，控制用户能否选中页面文本。支持none/auto/text/all四种模式，实时对比效果，一键复制CSS代码。纯前端处理。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用控制用户是否可以选择页面文本 · 禁止复制 · 一键选中
Updated: 2026-07-11
⚙️ 设置
👁️ 实时预览
📄 效果预览（试试选中下方文字）
💡 提示：尝试用鼠标拖选选中本段文字
第1行：这是普通文本段落，user-select 控制能否选中
第2行：请尝试用鼠标拖选体验效果
第3行：🔍 不同模式会影响用户交互体验
第2行：请尝试用鼠标拖选体验效果
第3行：🔍 不同模式会影响用户交互体验
📋 生成的 CSS 代码
.element {
-webkit-user-select: auto;
user-select: auto;
}
📖 属性说明
| 值 | 说明 | 适用场景 |
|---|---|---|
| auto | 默认行为，元素是否可选中由浏览器决定（通常可选中） | 普通文本内容 |
| text | 用户可以选中该元素的文本 | 明确需要可选的文本区域 |
| none | 禁止用户选中该元素及其子元素的文本 | 按钮、导航、图标、保护版权内容 |
| all | 点击该元素时自动全部选中，而非双击选中 | 代码块、邀请码、一次性复制文本 |
💡 常见应用场景
🚫 保护版权内容
对文章、电子书等内容使用 user-select: none 防止随意选中复制
🔘 改善 UI 体验
按钮、菜单、滑块等交互元素设置 none，防止双击时意外选中文字
📋 一键复制代码
代码块设置 user-select: all，用户单击即可全选，方便复制
🎯 减少误触
拖拽交互（排序、调整大小）区域设置 none，提升拖动体验
📝 文本编辑区
内容可编辑区域设置为 text，确保用户可正常选中编辑文字
🖼️ 图片画廊
纯展示的图片和描述文字设 none，保持画廊的干净交互
🌐 浏览器兼容性
现代浏览器均支持标准 user-select。建议同时保留 -webkit- 前缀以兼容旧版 Safari。
/* 推荐写法 - 兼容所有浏览器 */
.element {
-webkit-user-select: none; /* Safari/iOS */
user-select: none; /* 标准语法 */
}