Google does not provide a native setting to change the color or style of highlighted search terms. However, you can achieve this customization using browser extensions like Stylish or Stylus, which allow you to inject custom CSS into Google’s search results page. This method gives you full control over the appearance of matched words.
Why Native Customization Is Missing
Google Search is designed with a strict interface to ensure consistency and speed across billions of queries. The platform highlights keywords by wrapping them in<span> tags with specific classes, but it does not offer a user-facing toggle to modify these styles. While some users might hope for a simple checkbox in settings, such a feature has never been introduced due to the complexity of maintaining visual uniformity across different devices and languages.
For users who find the default yellow or bold highlighting distracting, alternative methods are necessary. If you are looking to improve your overall search efficiency while dealing with these visual constraints, you might also want to explore advanced techniques. You can learn more about maximizing search efficiency by reading our guide on Maximizing Search Efficiency: Google Advanced Search Operators in China. Understanding operators can sometimes reduce the need for heavy visual reliance on keyword matching.
Installing a User Style Manager
To customize the look of matched terms, you need a tool that allows you to write and apply custom Cascading Style Sheets (CSS) to specific websites. The most reliable and widely used tools for this purpose are the Stylish extension (for older browsers) or its modern successor, Stylus. These extensions are available for Chrome, Firefox, Edge, and other Chromium-based browsers. First, visit your browser’s official extension store. Search for "Stylus" as it is actively maintained and open-source, making it safer than many alternatives. Click "Add to Chrome" or the equivalent button for your browser. Once installed, you will see a small icon in your toolbar. It is crucial to grant the extension permission to read and change data on all websites, as it needs access to Google’s DOM to apply your custom styles. After installation, navigate to any Google Search results page. You should now see the Stylus icon active in your toolbar. Clicking it will reveal options to manage existing styles or create new ones. This step is foundational; without the extension, no amount of manual code editing will persist across page loads.Writing the Custom CSS Code
Once the extension is ready, you need to target the specific HTML elements that Google uses to highlight matched words. When you perform a search, Google wraps each matched term in a span element. Historically, these spans had classes likeqre or qrs, but Google frequently updates its internal class names. Therefore, the most robust way to target them is by using attribute selectors or broader class patterns if exact classes are unknown.
Click the "Write style for google.com" option in the Stylus menu. A text editor will open. Enter the following CSS code to change the background color and text weight of matched terms:
/* Target spans that likely contain highlighted text */
span[class*="qre"],
span[class*="qrs"] {
background-color: #ffffcc !important;
font-weight: normal !important;
border-bottom: 2px solid #ffcc00 !important;
}
/* Optional: Change the text color for better contrast */
span[class*="qre"] b,
span[class*="qrs"] b {
color: #333333 !important;
}[class*="..."] to match any class containing the substring. The !important flag is necessary because Google’s own stylesheets are loaded after user styles in some contexts, and this ensures your rules take precedence. You can adjust the hex codes for background-color and border-bottom to suit your preference. For example, changing font-weight from bold to normal reduces visual noise if you find bold text too aggressive.
Testing and Refining Your Styles
After saving the style, refresh your Google Search results page. Perform a new search to see the changes in action. Look closely at the snippets and titles where your query terms appear. If the highlighting is not visible, inspect the element using your browser’s developer tools (right-click > Inspect). Find the span tag surrounding the word and check its computed styles. If the default Google styles are overriding yours despite!important, you may need to increase the specificity of your selector. For instance, instead of just targeting span, you might try div.g span to target spans within the main result block. Be cautious when adding overly specific selectors, as they can break if Google changes its layout structure.
It is also important to note that this customization only affects your local view. Other users will still see the standard Google styling. This is a client-side modification, not a server-side change. If you encounter issues with readability, consider reducing the opacity of the background color rather than using solid blocks, which can make the text harder to scan quickly.
For those who find that visual customization is not enough and they are facing more fundamental issues with their search experience, such as unexpected redirects, you may want to investigate potential technical faults. Check out our article on Google Search Redirects to Different Website: A Tech Support Issue to rule out malware or DNS problems that might be interfering with your browsing session.