CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxbrowser
xmcp
xmcp

Reputation: 3742

How can I change the style of highlighted texts in the browser search result?

In major browsers, if I press Ctrl-F and input a phrase, the corresponding text in the webpage will be highlighted. I'm wondering if there is a way to customize the style of the highlighted text.

screenshot

e.g. Is it possible to change the color of world to red, in the screenshot?

UPDATE:

::selection does not work, as the text is not selected unless I close the search dialog. See this screenshot:

screenshot

Upvotes: 4

Views: 4036

Answers (2)

kukkuz
kukkuz

Reputation: 42362

The results from the Find function cannot be changed - this is the default User agent styling and I don't think there is any standard attribute that allows you to do it.

What you can do is to set it up for the browser you use, or just as much as set up the text selection color.

Browser Settings

If you want just to modify the style for a specific browser - see what you can do for:

  1. Firefox - add ui.textSelectBackgroundAttention with value as the color you need in about:config

  2. Chrome - you don't have any hidden settings like Firefox has and there is no way to change it AFAIK.

Note that the default styles may pick up the find highlight color from the OS theme too.

Text Selection

However, there is a way for styling text selection - you can use the selection psuedo element - see demo below:

.custom::selection {
  background: red; /* WebKit/Blink Browsers */
}
.custom::-moz-selection {
  background: red; /* Gecko Browsers */
}
<div class="custom"> This is some text</div>
<div>More text here</div>

Upvotes: 2

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Use ::selection, like:

/* For other Browsers */    
::selection {
  background: red;
  color: white;
}

/* For Firefox */
::-moz-selection {
  background: red;
  color: white;
}

Have a look at the working snippet below:

::-moz-selection {
  background: red;
  color: white;
}

::selection {
  background: red;
  color: white;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi unde reprehenderit voluptas! Deserunt ducimus reiciendis necessitatibus adipisci obcaecati iste alias voluptate ratione ut at exercitationem, eum, dicta, excepturi eius suscipit.</p>

Hope this helps!

Upvotes: 1

Related Questions