主页/WEB笔记/网页搜索高亮只能黄橙配，能不能让高亮更跟手一点？

网页搜索高亮只能黄橙配，能不能让高亮更跟手一点？

2,324字
10–15 分钟
in

网页上按下 Ctrl+F 搜个词，满屏的黄橙配色，看久了真有点腻。更扎心的是，如果页面背景色也是黄的，那搜出来的结果直接玩起隐身术。其实 Chrome 144 里悄悄藏了个叫 ::search-text 的新家伙，专门管这档子事，而且它还有一大家子兄弟，各管各的高亮区域。

目录

高亮伪类大家族

::search-text 身份卡

这就是按 Ctrl+F 搜出来的那些高亮块，当前选中的那个（术语叫 ::search-text:current）默认是橙色，其余是黄色。有了它，就能像换皮肤一样换掉这俩色儿，让搜索结果在深色背景里也炸眼。

其他高亮兄弟

  • ::selection：鼠标选中文本时拖出来的那个蓝色背景
  • ::target-text：通过网址后面加 #:~:text= 参数跳转时的高亮
  • ::highlight()：配合 JavaScript 的 Custom Highlight API，可以自定义任意片段
  • <mark> 标签：HTML 原生的标记元素，平时用来手动标重点
  • ::spelling-error 和 ::grammar-error：只对可编辑区域生效，管拼写和语法错误的红绿下划线

这些家伙默认都带着各自的样式，但真要跟页面设计搭边，还得手动调教。

动手改造高亮样式

第一步：摸清哪些属性能改

刚开始可能会想着用 background-clip: text 搞点花活，或者用 backdrop-filter: invert(1) 搞个反色。试了一圈发现，伪元素这里限制挺多，很多高级属性压根不认。最稳妥的招式还是从 background 和 color 下手。

第二步：用相对颜色语法整活

与其给每个颜色模式都写一套高亮样式，不如让高亮跟着背景自动变。拿页面主背景色 --background 为例，把它的 RGB 值取出来，每个通道用 255 一减，得到的就是反色。

body {
  --background: #38003c;
  background: var(--background);

  mark,
  ::selection,
  ::target-text,
  ::search-text {
    /* 高亮里的文字颜色跟背景色保持一致，这样背景色怎么变，文字颜色就怎么变 */
    color: var(--background);

    /* 背景色取反，让高亮块跟背景彻底撕开 */
    background: rgb(from var(--background) calc(255 - r) calc(255 - g) calc(255 - b));
  }
}

就像拍照调色一样，背景是深紫色（#38003c），转成 RGB 是 rgb(56, 0, 60)，每个通道一减，得到 rgb(199, 255, 195)，出来的高亮就是嫩绿色，跟紫色背景对比度直接拉满。

第三步：给不同高亮兄弟安排差异化皮肤

如果所有高亮都用一个反色，那 ::selection 和 ::search-text 叠在一起时，根本分不清谁是谁。稍微动点手脚，让它们只反色其中两个通道，保留一个原色通道，这样每个高亮块就有自己独特的偏色，同时还能保持反色的大体感觉。

body {
  --background: #38003c;
  background: var(--background);

  mark,
  ::selection,
  ::target-text,
  ::search-text {
    color: var(--background);
  }

  mark {
    /* 三个通道全反 */
    background: rgb(from var(--background) calc(255 - r) calc(255 - g) calc(255 - b) / 70%);
  }

  ::selection {
    /* 保留 R 通道，只反 G 和 B */
    background: rgb(from var(--background) r calc(255 - g) calc(255 - b) / 70%);
  }

  ::target-text {
    /* 保留 G 通道 */
    background: rgb(from var(--background) calc(255 - r) g calc(255 - b) / 70%);
  }

  ::search-text {
    /* 保留 B 通道 */
    background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 70%);

    &:current {
      /* 当前匹配项去透明，更醒目 */
      background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 100%);
    }
  }
}

这里给大部分高亮加了 70% 透明度，当两个高亮区域重叠时，能看到颜色混合的效果，一眼就能看出哪个区域被哪些高亮命中了。而 ::search-text:current 当前定位到的那一项用 100% 不透明，告诉眼睛“现在找的就是这个”。

第四步：防翻车小窍门

反色看起来简单，但遇到中灰色（比如 #808080）就翻车了，它的反色还是自己，高亮直接隐身。所以写代码前，先用在线工具测测背景色的反色跟文字对比度够不够。如果反色后的对比度还是不够，可以手动再加个阴影或者边框，比如：

::search-text {
  box-shadow: 0 0 0 2px cyan;
}

这样至少保证高亮区域有个外发光兜底。还有个小坑，::spelling-error 和 ::grammar-error 默认是下划线样式，不建议用上面的反色逻辑去覆盖，不然会把红绿下划线搞没了，反而让用户不知道哪个词写错了。

::highlight() 因为是 JS 动态生成的，样式需要在 CSS 里先定义好类名，再用 JS 去调用，跟 ::search-text 这种天然伪类玩法不太一样，但也能共用一套反色逻辑。

最后，开控制台调调 --background 变量看看效果，高亮颜色会跟着背景实时刷新，不用写死几十套配色方案，省心又省力。

最新发布