Estilizando Resultados de Ctrl+F com ::search-text

Por anos, estilizar os destaques de busca na página do navegador com CSS simplesmente não era possível. O navegador era o dono completo dessa UI. Você podia personalizar ::selection para texto selecionado com o mouse, mas no momento em que o usuário pressionava Ctrl+F, sua folha de estilos não tinha mais voz alguma. Isso está começando a mudar — pelo menos em navegadores baseados em Chromium.

O pseudo-elemento ::search-text é um novo recurso experimental do CSS que permite estilizar os destaques produzidos pela função nativa de busca na página do navegador. Aqui está o que ele faz, como funciona e o que esperar dele de forma realista neste momento.

O Que ::search-text Realmente Faz

Quando um usuário aciona Ctrl+F (ou Cmd+F no macOS) e digita uma consulta, o navegador destaca o texto correspondente na página. Historicamente, esses destaques eram pintados inteiramente pela camada do user-agent do navegador — fora do alcance de qualquer folha de estilos do autor.

::search-text é um pseudo-elemento de destaque CSS, parte da mesma família de ::selection, ::target-text e ::spelling-error. Ele tem como alvo os fragmentos de texto que o navegador marca durante uma sessão de busca na página, fornecendo um gancho para aplicar estilos personalizados.

Uso Básico

A sintaxe é direta:

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

Você também pode mirar a correspondência atualmente ativa — aquela na qual o navegador está focado enquanto você navega pelos resultados — usando o estado :current:

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

Essa distinção importa para a UX. Sem :current, toda correspondência parece idêntica. Com ela, é possível diferenciar visualmente o resultado focado dos demais, que é exatamente como os navegadores fazem nativamente.

Quais Estilos São Realmente Suportados

::search-text segue as mesmas restrições dos outros pseudo-elementos de destaque do CSS. Você está limitado a um subconjunto específico de propriedades relacionadas à pintura:

• color
• background-color
• text-decoration (e subpropriedades relacionadas)
• text-shadow

Propriedades de layout como padding, margin, border ou font-size não têm efeito. A camada de destaque é pintada sobre o conteúdo existente — ela não reflui nada.

Como Difere da CSS Custom Highlight API

Vale esclarecer essa distinção, já que ambos envolvem pseudo-elementos de destaque CSS.

A CSS Custom Highlight API permite que você defina seus próprios destaques nomeados via JavaScript usando objetos Range e CSS.highlights.set(). Você então os estiliza com ::highlight(seu-nome). É poderosa, mas requer JavaScript, e você controla qual texto é destacado.

::search-text é diferente: o navegador controla o que é destacado (o que corresponde à consulta de busca na página), e você controla apenas o estilo visual. Sem necessidade de JavaScript. Sem necessidade de conhecer a consulta de busca.

Suporte de Navegadores: Experimental e Apenas Chromium

Esta é a parte que mais importa para decisões de produção. No início de 2026, ::search-text está disponível apenas em navegadores baseados em Chromium a partir da versão 144 — Chrome e Edge no desktop. Firefox e Safari ainda não oferecem suporte. Você pode acompanhar o suporte atual no Can I use.

Trate isso como um aprimoramento progressivo. Navegadores que não suportam ::search-text simplesmente ignorarão a regra e recorrerão ao seu estilo de destaque padrão. Tudo bem — o recurso degrada de forma elegante.

/* Aplica-se apenas em navegadores Chromium compatíveis */
::search-text {
  background-color: #ffe066;
  color: #111;
}

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

Feature queries como @supports selector(::search-text) não são necessárias para um fallback seguro, mas podem ser úteis se você quiser delimitar estilos ou comunicar o suporte de forma mais explícita.

Vale a Pena Adicionar Agora

::search-text não substituirá o comportamento padrão do navegador para a maioria dos usuários hoje. Mas para equipes construindo experiências de leitura refinadas — sites de documentação, aplicações com muito conteúdo, design systems — é uma forma de baixo custo e sem JavaScript de alinhar os destaques de busca na página com sua linguagem visual, ao menos para usuários em navegadores Chromium modernos.

Adicione-o à sua folha de estilos, combine-o com :current para diferenciar a correspondência ativa, e fique de olho no suporte do Firefox e Safari à medida que a especificação amadurece.

Conclusão

O pseudo-elemento ::search-text fecha uma pequena, mas antiga lacuna no CSS, permitindo que autores estilizem os resultados de busca na página do navegador. Embora o suporte esteja atualmente confinado aos navegadores Chromium, a API é simples, não requer JavaScript e degrada de forma limpa em ambientes não suportados. Para sites onde a experiência de leitura importa, é um acréscimo direto que aproxima a UI nativa do navegador um passo a mais do seu design system.

Perguntas Frequentes

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