如何使用CSS伪元素::selection自定义用户选中文本的背景色？-css教程-PHP中文网

::selection有时完全不生效，最常见原因是选择器优先级不足或被其他样式覆盖；它仅支持color、background-color、text-shadow、cursor和outline（部分浏览器），不继承父样式，且无法穿透shadow dom。

如何使用css伪元素::selection自定义用户选中文本的背景色？

为什么 `::selection` 有时完全不生效？

最常见原因是选择器优先级不足或被其他样式覆盖。浏览器对 ::selection 的支持有严格限制：它只接受 color、background-color、text-shadow、cursor 和 outline（部分浏览器）这五个属性，其余如 font-size、padding 全部被忽略。另外，它不继承父元素样式，必须显式声明。

实操建议：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

把 ::selection 规则放在 CSS 文件靠后位置，避免被更早定义的同名规则覆盖
不要嵌套写法（如 p::selection 在某些旧版 Safari 中失效），推荐全局写法：::selection { background-color: #ff6b6b; }
如果页面用了 CSS-in-JS 或 Shadow DOM，需确认作用域是否包含该伪元素——它无法穿透 Shadow Boundary

`::selection` 在不同浏览器中的兼容性差异

Chrome / Edge / Firefox 支持良好，但 Safari（尤其是 iOS 15.4 之前）对 ::selection 的 color 和 background-color 支持不稳定，且不支持在 @media 查询中使用。更关键的是：Safari 默认会强制将选中文本的 color 设为白色（即使你设了黑色），除非同时设置 background-color。

实操建议：

始终成对设置：::selection { background-color: #4a90e2; color: white; }，避免 Safari 下文字不可读
如需深色模式适配，不能依赖 @media (prefers-color-scheme: dark) 包裹 ::selection（无效），应改用 JS 动态切换 class 并定义 .dark ::selection
测试时务必在真机 Safari 上验证，模拟器可能表现正常但实际设备不生效

如何让 `::selection` 在输入框（`<input>`、`<textarea></textarea>`）中也起作用？

默认情况下，::selection 对表单控件无效。这是因为原生输入框的文本选择由操作系统渲染层控制，CSS 伪元素无法接管。但可通过 user-select: text 配合 -webkit-text-fill-color 等前缀属性“绕过”限制。

实操建议：

对 <input type="text"> 和 <textarea></textarea> 单独加前缀规则：

::-webkit-input-placeholder::selection { background-color: #ffeb3b; }
input::selection, textarea::selection { background-color: #ffeb3b; }
::-moz-selection { background-color: #ffeb3b; }

注意：Firefox 不支持 input::selection，只能靠 ::-moz-selection（已废弃但仍有效），而 Safari 需要 ::-webkit-selection（仅旧版本）
更稳妥的做法是禁用原生选择样式，用 JS 模拟选区（代价是复杂度陡增，一般不推荐）

为什么设置了 `::selection` 后，部分文字背景色出现闪烁或错位？

这是由于浏览器在重绘选区时，若父容器有 transform、opacity 或 <code>will-change，会导致合成层异常，使 ::selection 渲染偏移或闪烁。尤其在滚动容器（如 overflow-y: auto）内选中文本时高频出现。

实操建议：

检查父级是否有 transform: translateZ(0) 或 opacity: 0.99 类似“触发硬件加速”的 hack，临时移除它们验证是否为根因
避免在 position: fixed 或 backdrop-filter 元素内部使用 ::selection
如果必须保留这些样式，可对选中文本容器加 isolation: isolate 强制新建层叠上下文，缓解错位

CSS 伪元素 ::selection 表面简单，但跨浏览器行为、表单控件支持、合成层干扰这三个点最容易被忽略。真正上线前，至少要在 Chrome、Firefox、Safari（iOS + macOS）、Edge 四个环境里分别拖选文本三次。