Ctrl+F-Ergebnisse mit ::search-text gestalten

Jahrelang war es schlicht nicht möglich, die Hervorhebungen der browserinternen Seitensuche per CSS zu gestalten. Diese UI gehörte vollständig dem Browser. Zwar ließ sich ::selection für mit der Maus markierten Text anpassen, doch sobald Nutzer Ctrl+F drückten, hatte das eigene Stylesheet keinerlei Mitspracherecht. Das ändert sich allmählich – zumindest in Chromium-basierten Browsern.

Das Pseudo-Element ::search-text ist ein neues, experimentelles CSS-Feature, mit dem sich die vom Browser bei der nativen Seitensuche erzeugten Hervorhebungen stylen lassen. Hier erfahren Sie, was es leistet, wie es funktioniert und was Sie aktuell realistisch davon erwarten können.

Was ::search-text tatsächlich tut

Wenn ein Nutzer Ctrl+F (oder Cmd+F unter macOS) auslöst und eine Suchanfrage eingibt, hebt der Browser passende Textstellen auf der Seite hervor. Bislang wurden diese Hervorhebungen vollständig auf der User-Agent-Ebene des Browsers gerendert – außerhalb der Reichweite jedes Autoren-Stylesheets.

::search-text ist ein CSS-Highlight-Pseudo-Element und gehört damit zur selben Familie wie ::selection, ::target-text und ::spelling-error. Es zielt auf die Textfragmente, die der Browser während einer Seitensuche markiert, und bietet Ihnen einen Ansatzpunkt, um eigene Stile anzuwenden.

Grundlegende Verwendung

Die Syntax ist denkbar einfach:

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

Mit dem Zustand :current lässt sich auch gezielt der aktuell aktive Treffer ansprechen – also derjenige, auf den der Browser fokussiert, während Sie durch die Ergebnisse navigieren:

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

Diese Unterscheidung ist für die UX entscheidend. Ohne :current sehen alle Treffer identisch aus. Mit :current können Sie den fokussierten Treffer optisch von den übrigen abheben – genau so, wie es Browser auch nativ handhaben.

Welche Stile tatsächlich unterstützt werden

::search-text unterliegt denselben Einschränkungen wie andere CSS-Highlight-Pseudo-Elemente. Sie sind auf eine bestimmte Teilmenge darstellungsbezogener Eigenschaften beschränkt:

• color
• background-color
• text-decoration (und zugehörige Untereigenschaften)
• text-shadow

Layout-Eigenschaften wie padding, margin, border oder font-size haben keine Wirkung. Die Highlight-Ebene wird über den vorhandenen Inhalt gerendert – sie löst keinen Reflow aus.

Wie es sich von der CSS Custom Highlight API unterscheidet

Hier lohnt sich eine klare Abgrenzung, da beide Konzepte CSS-Highlight-Pseudo-Elemente einsetzen.

Mit der CSS Custom Highlight API lassen sich eigene benannte Hervorhebungen per JavaScript über Range-Objekte und CSS.highlights.set() definieren. Diese stylen Sie anschließend mit ::highlight(ihr-name). Das ist mächtig, erfordert aber JavaScript, und Sie steuern selbst, welcher Text hervorgehoben wird.

::search-text funktioniert anders: Der Browser bestimmt, was hervorgehoben wird (nämlich die Treffer der Seitensuche), und Sie steuern nur das visuelle Erscheinungsbild. Kein JavaScript nötig. Keine Kenntnis der Suchanfrage erforderlich.

Browser-Support: experimentell und nur in Chromium

Dies ist der für Produktiventscheidungen entscheidende Punkt. Stand Anfang 2026 ist ::search-text ausschließlich in Chromium-basierten Browsern ab Version 144 verfügbar – also Chrome und Edge auf dem Desktop. Firefox und Safari unterstützen es noch nicht. Den aktuellen Support-Status können Sie auf Can I use verfolgen.

Behandeln Sie es als Progressive Enhancement. Browser, die ::search-text nicht unterstützen, ignorieren die Regel einfach und greifen auf ihr Standard-Highlighting zurück. Das ist unproblematisch – das Feature degradiert sauber.

/* Wirkt nur in unterstützenden Chromium-Browsern */
::search-text {
  background-color: #ffe066;
  color: #111;
}

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

Feature Queries wie @supports selector(::search-text) sind für ein sicheres Fallback nicht erforderlich, können aber sinnvoll sein, wenn Sie Stile gezielt eingrenzen oder die Unterstützung expliziter kennzeichnen möchten.

Lohnt sich schon heute

::search-text wird das Standardverhalten des Browsers für die meisten Nutzer derzeit nicht ersetzen. Doch für Teams, die ausgefeilte Leseerlebnisse bauen – Dokumentationsseiten, inhaltslastige Apps, Designsysteme – ist es eine kostengünstige, JavaScript-freie Möglichkeit, die Hervorhebungen der Seitensuche an die eigene visuelle Sprache anzugleichen, zumindest für Nutzer moderner Chromium-Browser.

Nehmen Sie es in Ihr Stylesheet auf, kombinieren Sie es mit :current zur Hervorhebung des aktiven Treffers, und behalten Sie die Entwicklung der Unterstützung in Firefox und Safari im Auge, während die Spezifikation reift.

Fazit

Das Pseudo-Element ::search-text schließt eine kleine, aber lang bestehende Lücke in CSS, indem es Autoren erlaubt, die Treffer der browserinternen Seitensuche zu gestalten. Auch wenn die Unterstützung derzeit auf Chromium-Browser beschränkt ist, ist die API einfach, kommt ohne JavaScript aus und degradiert in nicht unterstützenden Umgebungen sauber. Für Websites, bei denen das Leseerlebnis zählt, ist es eine unkomplizierte Ergänzung, die die native Browser-UI ein Stück näher an Ihr Designsystem heranführt.

FAQs

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..