Firefox 58.0.2中如何让选中文本失焦后保留自定义背景色

嘿，这个场景我太熟悉了！在Firefox里（尤其是你用的58.0.2这类旧版本），选中文本失焦后默认会切换成系统自带的淡色背景，要固定住自定义背景色，核心是用对CSS的选中文本伪类，下面是具体方案：

核心CSS代码 #

你需要同时覆盖标准选中文本样式和Firefox专属的前缀样式，确保失焦后样式不失效：

/* 标准选中文本样式，适配多数现代浏览器 */
::selection {
  background-color: #ffeb3b; /* 替换成你想要的自定义背景色，比如这个亮黄色 */
  color: #212121; /* 可选：设置选中文本的字体颜色，增强可读性 */
}

/* Firefox专属样式（必须加前缀，旧版Firefox依赖这个） */
::-moz-selection {
  background-color: #ffeb3b; /* 和上面保持一致的颜色值 */
  color: #212121;
}

额外优化（如果样式不生效时） #

如果添加上面的代码后还是有问题，可能是目标元素的文本选中权限被限制了，给目标元素加上以下样式确保文本可选中：

/* 替换成你的文本容器类名或标签 */
.target-text-container {
  user-select: text; /* 强制允许文本选中 */
}

验证步骤 #

1. 把上述CSS添加到你的项目样式文件中，替换成你需要的颜色值
2. 选中页面上的目标文本
3. 点击浏览器搜索栏（或其他页面外区域）让选区失焦
4. 检查选中文本的背景色是否保持你设置的自定义颜色

注意事项 #

Firefox 58.0.2是比较老的版本，必须保留::-moz-selection前缀才能生效；如果是新版本Firefox，现在已经支持不带前缀的::selection，但为了兼容旧版，建议两个都写上。

内容的提问来源于stack exchange，提问作者MikelAlejoBR