CSS中如何禁止用户选中网页上的文字？-css教程-PHP中文网

user-select: none不能直接生效，因其仅为提示而非强制锁；常见失效原因包括表单控件（input/textarea/contenteditable）被浏览器强制忽略、继承自父级user-select:text、高优先级样式覆盖及ios safari渲染延迟；需写全-webkit-、-moz-、-ms-前缀并显式重置表单元素为user-select:text。

css中如何禁止用户选中网页上的文字？

直接写 user-select: none 不能直接生效，尤其在表单控件、移动端或旧浏览器里——它只是提示，不是强制锁。

为什么加了 `user-select: none` 还能选中？

常见错误现象不是语法错，而是被绕过了：

<input>、<textarea></textarea> 或 contenteditable="true" 元素会无视该声明，浏览器强制允许选择
父级设了 user-select: text，子元素又没显式覆盖，继承导致失效（user-select 是可继承属性）
样式被更高优先级规则覆盖，比如框架 class 带 !important，或内联样式写了 user-select: text
iOS Safari 长按后仍可能短暂高亮甚至弹出“复制”菜单——这是渲染延迟 + 系统行为干预，不是 CSS 失效

必须写的兼容写法（含前缀）

只写 user-select: none 在 Safari 14.0 以下、IE11、部分 Android WebView 中会彻底失效。要兜底，得一次性写全：

element {
  -webkit-user-select: none; /* Safari & iOS */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ / Edge */
  user-select: none;         /* 标准 */
}

注意：-khtml-user-select 已淘汰，不用加；body { user-select: none } 不推荐——它会影响所有后代，包括你忘了重置的 <input>，结果用户连输入框都选不了文字。

哪些元素必须显式重置 `user-select`？

一旦在 body 或根容器上设了 user-select: none，所有子元素都会继承，包括 <input>、<textarea></textarea>、<select></select>、<button></button>。这些元素会失去文本选择能力，导致光标无法定位、无法拖动选区、甚至输入法异常。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

必须对表单控件单独设置：

input, textarea, select, button {
  user-select: text;
}

[contenteditable="true"] 也要单独处理：

[contenteditable="true"] {
  user-select: text;
}

如果用了自定义富文本编辑器（如 div[role="textbox"]），同样要显式设为 text 或 auto。

真正难处理的不是加一行 CSS，而是判断「哪些区域真不该被选中」

比如数据卡片里的 ID 字段确实该禁选，但旁边「复制」按钮的文案却需要用户能选中以手动复制。这类边界情况，得靠语义化结构 + 精确的选择器来收口，而不是一刀切。更麻烦的是混合场景：图标用伪元素生成，文字要禁选，但图标本身还要响应点击——这时候 user-select: none 往往得配合 pointer-events: none 或 tabindex 调整焦点逻辑，否则键盘用户就卡住了。