How to change the text selection color

Short answer

::selection sets the colors of text the user has selected. Select the lines below:

<style>
  .brand::selection { background: gold; color: black; }
</style>
 
<p class="brand">Select this text to see the gold highlight.</p>
<p>This paragraph keeps the default selection color.</p>

For the whole page

Without a selector before the colon the rule applies to the whole page:

::selection { background: rgb(255 215 0 / 60%); }

A semi-transparent background looks good on any page colors.

What you can change

Only a few properties work inside ::selection: color, background-color, text-decoration and text-shadow. Fonts, padding and borders have no effect there.

Disabling selection

If text should not be selectable, for example on a button, there is user-select: none. Do not use it on normal text — people copy quotes, addresses and numbers.

Common mistake

People pick a selection color that makes the text hard to read, such as light text on pale yellow. Set background and color together and check the contrast.