如何将CSS ::selection的背景设置为原有背景色的滤镜效果，无需硬编码

原代码失效原因 #

::selection伪元素的可修改属性存在浏览器硬限制，目前主流浏览器仅支持修改color、background-color、text-decoration、text-shadow、stroke、fill六类属性，backdrop-filter不在支持范围内，因此你写的样式会被浏览器直接忽略。

可行解决方案 #

根据你的场景（子元素无法获知背景色硬编码值），可以选择以下两种实现方案：

方案1：CSS相对颜色衍生（推荐，无JS依赖） #

只要父元素的背景色通过CSS变量定义，就可以直接在::selection中调用变量做动态颜色计算，不需要子元素硬编码色值：

/* 父容器定义背景色变量 */
.content-wrapper {
  --container-bg: #4ade80;
  background: var(--container-bg);
}

/* 选中态直接基于父容器背景变量衍生 */
.content-wrapper ::selection {
  /* 基于原有背景色调整亮度，可自行修改计算规则 */
  background: hsl(from var(--container-bg) h s calc(l * 0.25));
  color: #fff;
}

该方案兼容性覆盖Chrome 111+、Firefox 112+、Safari 16.4+，符合绝大多数生产环境要求。

方案2：JS监听+遮罩层实现（全场景兼容） #

如果完全无法获取背景色、也不能修改父元素的CSS变量定义，可以通过动态遮罩层加backdrop-filter实现效果：

1. 先把默认选中态的背景设为透明，避免和自定义遮罩冲突：

.text-area ::selection {
  background: transparent;
}
/* 自定义选中遮罩 */
.selection-overlay {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 9;
  backdrop-filter: brightness(.25);
  transition: opacity 0.1s ease;
}
.selection-overlay.active {
  opacity: 1;
}

2. 加JS监听选中事件，动态调整遮罩位置大小：

const textArea = document.querySelector('.text-area')
// 生成遮罩元素插入容器
const overlay = document.createElement('div')
overlay.className = 'selection-overlay'
textArea.appendChild(overlay)

document.addEventListener('selectionchange', () => {
  const selection = window.getSelection()
  // 无选中内容/选中区域不在目标容器内时隐藏遮罩
  if (selection.rangeCount === 0 || !textArea.contains(selection.getRangeAt(0).commonAncestorContainer)) {
    overlay.classList.remove('active')
    return
  }
  // 计算选中区域坐标，更新遮罩位置
  const rangeRect = selection.getRangeAt(0).getBoundingClientRect()
  const containerRect = textArea.getBoundingClientRect()
  overlay.style.cssText = `
    left: ${rangeRect.left - containerRect.left}px;
    top: ${rangeRect.top - containerRect.top}px;
    width: ${rangeRect.width}px;
    height: ${rangeRect.height}px;
  `
  overlay.classList.add('active')
})

该方案适合所有场景，仅需要额外处理多行选中、滚动容器等特殊情况即可。

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