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

Question

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.

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:

Answer 1

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>

Answer 2

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!