使用 ::search-text 美化 Ctrl+F 搜索结果

多年以来，使用 CSS 设置浏览器页内查找高亮的样式根本不可能实现。浏览器完全掌控着这一 UI。你可以为鼠标选中的文本自定义 ::selection，但用户一旦按下 Ctrl+F，你的样式表就毫无发言权了。这种局面正在开始改变——至少在基于 Chromium 的浏览器中是如此。

::search-text 伪元素是一项全新的实验性 CSS 特性，它允许你为浏览器原生页内查找功能产生的高亮设置样式。下面我们来看看它的功能、工作原理，以及目前能合理期待它做什么。

::search-text 的实际作用

当用户触发 Ctrl+F（在 macOS 上为 Cmd+F）并输入查询内容时，浏览器会高亮页面上匹配的文本。一直以来，这些高亮完全由浏览器的用户代理层绘制——任何作者样式表都无法触及。

::search-text 是一个 CSS 高亮伪元素，与 ::selection、::target-text 和 ::spelling-error 同属一个家族。它针对浏览器在页内查找会话中标记的文本片段，为你提供一个应用自定义样式的入口。

基本用法

语法非常直接：

::search-text {
  background-color: oklch(85% 0.2 90);
  color: black;
}

你还可以使用 :current 状态来定位当前激活的匹配项——也就是你在切换搜索结果时浏览器正聚焦的那个：

::search-text:current {
  background-color: oklch(70% 0.25 60);
  color: white;
}

这个区分对用户体验至关重要。如果不使用 :current，所有匹配项看起来都一样。有了它，你就能在视觉上将聚焦的结果与其余结果区分开来——这正是浏览器原生样式的实现方式。

哪些样式真正受支持

::search-text 遵循与其他 CSS 高亮伪元素相同的约束。你只能使用与绘制相关的特定属性子集：

• color
• background-color
• text-decoration（及相关子属性）
• text-shadow

诸如 padding、margin、border 或 font-size 等布局属性不会生效。高亮层是绘制在现有内容之上的——它不会引起任何重排。

与 CSS Custom Highlight API 的区别

由于两者都涉及 CSS 高亮伪元素，这里有必要澄清一下两者的区别。

CSS Custom Highlight API 允许你通过 JavaScript 使用 Range 对象和 CSS.highlights.set() 定义自己的命名高亮。然后用 ::highlight(your-name) 设置其样式。它功能强大，但需要 JavaScript，并且由你控制哪些文本被高亮。

::search-text 则不同：浏览器控制哪些内容被高亮（即与页内查找查询匹配的内容），而你只控制视觉样式。无需 JavaScript。也无需了解搜索查询。

浏览器支持：实验性且仅限 Chromium

这是对生产决策最重要的部分。截至 2026 年初，::search-text 仅在 Chromium 内核浏览器版本 144 及以上可用——即桌面端的 Chrome 和 Edge。Firefox 和 Safari 尚不支持。你可以在 Can I use 上跟踪当前支持情况。

请将其视为渐进式增强。不支持 ::search-text 的浏览器会直接忽略该规则，回退到其默认的高亮样式。这没问题——该特性能够优雅降级。

/* 仅在支持的 Chromium 浏览器中生效 */
::search-text {
  background-color: #ffe066;
  color: #111;
}

::search-text:current {
  background-color: #f5a623;
  color: white;
}

像 @supports selector(::search-text) 这样的特性查询并非安全回退所必需，但如果你想限定样式作用范围或更明确地表达支持情况，它仍然很有用。

现在值得添加

如今，::search-text 不会取代浏览器对大多数用户的默认行为。但对于构建精致阅读体验的团队——文档站点、内容密集型应用、设计系统——它提供了一种低成本、零 JavaScript 的方式，让页内查找高亮与你的视觉语言保持一致，至少对使用现代 Chromium 浏览器的用户而言是如此。

将其加入你的样式表，配合 :current 实现激活匹配项的差异化，并随着规范的成熟密切关注 Firefox 和 Safari 的支持情况。

总结

::search-text 伪元素弥补了 CSS 中一个虽小但长期存在的空白，让作者能够为浏览器页内查找结果设置样式。尽管目前支持仅限于 Chromium 浏览器，但其 API 简单、无需 JavaScript，并能在不支持的环境中干净地降级。对于注重阅读体验的网站来说，这是一个简单直接的补充，让原生浏览器 UI 离你的设计系统更近一步。

常见问题

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..