`::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;
}

この区別は UX において重要です。: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 は、Range オブジェクトと CSS.highlights.set() を使って JavaScript から独自の名前付きハイライトを定義できる仕組みです。それを ::highlight(your-name) でスタイリングします。強力ですが、JavaScript を必要とし、どのテキストをハイライトするかは自分でコントロールします。

::search-text はそれとは異なります: 何をハイライトするか(ページ内検索クエリにマッチするもの)はブラウザが制御し、あなたが制御するのは見た目のスタイルだけです。JavaScript は不要で、検索クエリの内容を知る必要もありません。

ブラウザサポート: 実験的かつ Chromium のみ

ここが本番投入の判断にとって最も重要な部分です。2026 年初頭の時点で、::search-text は バージョン 144 以降の Chromium 系ブラウザ ― デスクトップの 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 をデザインシステムに一歩近づけるための、手軽な追加要素です。

FAQ

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