Selected Text Background Color

What is the browser-default background color when selecting text?

1. Safari 6.0.3 Mac^*: #B4D5FE
2. Chrome 26.0.1410.65 Mac^*: #ACCEF7
3. Firefox 19.0 Mac^*: #B4D5FF
4. Chrome 26.0.1410.64 m Windows 8⁺: #3297FD
5. Firefox 20.0.1 Windows 8⁺: #3399FF
6. Safari 5.1.7 Windows 8⁺: #3298FD
7. Internet Explorer 10.0.4 Windows 8⁺: #3399FF
8. Chrome 107.0.5304.88 Windows 11: rgba(0, 116, 255, 0.8) or #0074ffcc

^*_{Found using ColorSnapper for Mac}

⁺_{Found using ColorSchemer for Windows}

And here's a screenshot of that information with the hex color codes highlighted in the same color:

---

This will be a never-ending list, however, since each...

1. Browser
2. Operating System
3. Browser Version (maybe)

...will probably have a different color. Also, as of CSS3, you can change the color using:

::selection{
    background-color:#000;
}

how to change the text selection background color

You can use certain CSS selectors to change CSS properties on selected text. (I tested this and it worked in Firefox, Safari, Chrome, and even Konqueror, but not IE). Example:

*::selection {
    background: #cc0000;
    color: #ffffff;
}
*::-moz-selection {
    background: #cc0000;
    color: #ffffff;
}
*::-webkit-selection {
    background: #cc0000;
    color: #ffffff;
}

You have to specify each selector separately or else it doesn't work (I guess the CSS parser stops processing a selector if it encounters an error). This changes the background color of the selected text to dark red and the color to white (and any other CSS you want to change). This doesn't have great cross-browser support (doesn't work in IE, and probably not Opera, either), but I think it is the only solution possible without some kind of complicated, buggy JavaScript script.

More info: http://www.quirksmode.org/css/selection.html

Is there any way to change background color of ::selection (selected text) using JavaScript?

In general where it's not possible to directly change pseudo element settings via JS it is possible to set CSS variables using JS.

So if you have something like this in your stylesheet:

::selection {
  background-color: var(--selcolor);
}

and something like this in your JS:

   element.style.setProperty('--selcolor', selcolor)

it will work.

Here's small example. It changes the selection color variable in the body:

function selChange(color) {
  document.body.style.setProperty('--selcolor', color);
}

body {
  --selcolor: yellow;
}

::selection {
  background-color: var(--selcolor);
}

<button onclick="selChange('cyan');">Cyan</button>
<button onclick="selChange('magenta');">Magenta</button>
<button onclick="selChange('yellow');">Yellow</button>
<p>Highlight some of this text, then click a color and highlight some text...</p>

Permanently change selected text background color

You need to add event listener in javascript and when a text is selected at that time need to change the color like below

function logSelection(event) {
  // Get Selection
  sel = window.getSelection();
  if (sel.rangeCount && sel.getRangeAt) {
    range = sel.getRangeAt(0);
  }
  // Set design mode to on
  document.designMode = "on";
  if (range) {
    sel.removeAllRanges();
    sel.addRange(range);
  }
  // Colorize text
  document.execCommand("ForeColor", false, "red");
  // Set design mode to off
  document.designMode = "off";
}

const input = document.querySelector('input');
input.addEventListener('select', logSelection);

How Do You Fix the Darkened Text Selection Color in Safari? - CSS

this issue described here

For now you can make your background-color 99% opacity

::selection {
  background-color: rgba(0, 50, 0, 0.99);
  color: #fff8dc;
}

Change background color of selected text on WebStorm?

Try changing background color of Editor > Selection background in Preferences | Editor | Color Scheme | General

---

Related Topics