Chrome 144 shipped something for those of us who care about UI details: the ::search-text pseudo-element. If browser-default search highlights have ever clashed with your brand colors or failed a contrast check, this is the fix. I have spent 14 years working around “good enough” browser defaults, and find-in-page highlights were overdue for real control.
The ::search-text pseudo-element targets the yellow and orange highlights a user sees after hitting Ctrl + F. There is also ::search-text:current for the active match. Good news for UX, but like every highlight pseudo-element it comes with a few gotchas before you ship it.
The problem with default highlights
Browsers use a generic yellow background for matches. That reads fine on white. On a dark-themed WordPress site, or any layout with saturated background colors, it looks broken. Until now you could not style these elements at all, so users with visual impairments often lost track of where their search term actually landed.
Highlight pseudo-elements only accept a restricted property list. You can’t throw display: flex or filter: blur() at them. You are mostly limited to:
colorbackground-colortext-decorationtext-shadow
A better way to style ::search-text
Rather than hardcoding a hex value that breaks somewhere else on the site, use Relative Color Syntax. Your highlight background then keeps enough contrast against the text whatever the container color is, because you can invert that color on the fly.
/* Ahmad's Adaptive Highlight Mixin Concept */
:root {
--site-bg: #38003c;
}
body {
background: var(--site-bg);
}
::search-text {
/* Set text to the site background for maximum legibility */
color: var(--site-bg);
/* Dynamically calculate an inverted background with 70% opacity */
background: rgb(from var(--site-bg) calc(255 - r) calc(255 - g) calc(255 - b) / 70%);
}
::search-text:current {
/* Make the active search result pop with 100% opacity */
background: rgb(from var(--site-bg) calc(255 - r) calc(255 - g) calc(255 - b) / 100%);
}This is less a shiny new toy than a cleaner way to handle accessibility. The from keyword in RGB lets you subtract each channel from 255, which gives you the exact inverse. On a site with a complicated design, that saves writing 50 media queries just for search colors.
Stacking highlight elements
I once had a client site where ::selection and ::target-text overlapped, and the result was a muddy brown mess. So differentiate your highlight pseudos. Keep ::selection on your brand primary, for instance, and save the inverted logic for the ::search-text pseudo-element.
If you’re still dealing with “nightmare” UI issues like ugly link underlines or broken layouts, modern CSS gives us the tools to fix them without the legacy hacks we used in the WP 4.x days.
If the ::search-text pseudo-element is eating your dev hours, I can take that off your plate. I have been wrestling with WordPress since the 4.x days.
Final takeaway on browser highlights
::search-text in Chrome 144 is one more piece of the browser that used to be off limits and now isn’t. You can stop deferring to default behavior and make highlights match the rest of the design. Let them stand out, too. A highlight nobody notices is doing nothing.
