如何处理不同浏览器对CSS user-select属性的兼容-css教程-PHP中文网

user-select: none 需四套前缀：-webkit-user-select、-moz-user-select、-ms-user-select、user-select；ios safari 15.x 及更早仅支持 -webkit-user-select，且长按菜单需配合 -webkit-touch-callout: none 和 touch-action: manipulation 抑制。

如何处理不同浏览器对css user-select属性的兼容

必须写全四套前缀，且标准写法放最后

Chrome 120+、Firefox 69+、Safari 16+ 都已支持 user-select: none，但 iOS Safari（尤其 15.x 及更早）仍只认 -webkit-user-select: none；旧版 Firefox（-moz-user-select；IE10/EdgeHTML 旧版需 -ms-user-select。漏掉任意一条，就可能在对应环境失效。

关键细节：user-select: none 必须写在所有前缀之后，否则会被前面的前缀规则覆盖（CSS 同名属性后声明者生效）。不推荐用 -o-user-select——Opera 自 15 起已转向 Blink，无需该前缀。

正确写法示例：

div.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

表单控件和 contenteditable 元素天然无视 user-select

<input>、<textarea></textarea>、<select></select>、<button></button> 以及任何带 contenteditable="true" 的元素，浏览器强制允许文本选择与光标操作——这是规范行为，不是 bug。你加了 user-select: none 完全没用。

如果你全局设置了 body { user-select: none; }，这些元素会继承但被内部逻辑覆盖，可光标定位；但若父容器还叠加了 pointer-events: none 或 opacity: 0 等干扰属性，就可能意外失焦或无法触发输入法。

解决方案：

显式重置：给表单控件单独加 input, textarea, select, button, [contenteditable] { user-select: text; }
避免在富文本容器上直接设 user-select: none，改用更细粒度控制（如仅对非编辑区域设）
自定义 div[role="textbox"] 类编辑器，必须手动加 user-select: text

子元素显式设 `user-select: text` 会覆盖继承值

user-select 是可继承属性，但继承值可被子元素任意显式声明覆盖。第三方 UI 库（如 Element Plus、Ant Design）常在组件内部写死 user-select: text，导致你的外层 no-select 类完全失效。

小红书长文-谷歌浏览器

在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。

下载

常见表现：开发者工具「Computed」面板里看到目标元素的 user-select 值是 text，但你检查样式来源，发现它来自组件 CSS 文件而非你写的规则。

应对方式：

用更强选择器覆盖，例如 .no-select > * { user-select: none !important; }（慎用 !important，优先靠权重）
改用通配符重置：.no-select * { user-select: none; }，比仅作用于自身更彻底
检查是否误用了 Shadow DOM —— 外部样式默认不穿透，Web Components 内需在 shadow root 中单独声明