I saw this little nice piece about setting selection colors:

Setting Text Selection Colors in JavaScript .html

Since it is possible to set the color I guess there is some way to GET it to. I just can't find it. ;-)

Anyone has found out how to get the selection colors?

I saw this little nice piece about setting selection colors:

Setting Text Selection Colors in JavaScript http://blogs.adobe./cantrell/archives/2012/02/setting-text-selection-colors-in-javascript.html

Since it is possible to set the color I guess there is some way to GET it to. I just can't find it. ;-)

Anyone has found out how to get the selection colors?

• javascript
• jquery
• css
• dom

• 1 Please clarify your question – Roko C. Buljan Commented Jan 6, 2014 at 13:27
• You can set selection colour with some CSS. – putvande Commented Jan 6, 2014 at 13:28
• 1 What are you asking? It seems the code is already there for changing the colour. What don't you understand? There is even a linked example page - which you can look at the source code for – musefan Commented Jan 6, 2014 at 13:29
• Thanks @A Wolff, yes I want to get the colors. – Leo Commented Jan 6, 2014 at 13:43
• I want to get the CSS selection color so I can use it for drawing text in a Canvas with the same appearance. The OPs question seems quite clear to me. – Adam Gawne-Cain Commented May 24, 2022 at 8:28

6 Answers 6

Colors used by the browser/OS for buttons, text selection etc. are known as 'system colors'. What you are looking for is the system colors "Highlight" and "HighlightText", and these are available in CSS2

element {
    background-color: highlight;
    color: highlighttext;
}

and javascript:

element.style.backgroundColor = 'Highlight';
element.style.color = 'HighlightText';

To reset them to default colors, set those properties back to empty string ''.

You can get a full list of system colors at http://www.w3/wiki/CSS/Properties/color/keywords. Note: that page says this is a feature of CSS2 and has been deprecated in favor of the CSS3 UI ‘[appearance]’ property, but if you read http://www.w3/TR/css3-ui/#appearance, it seems that system colors have been dropped from the UI appearance spec, so where that leaves us I have no idea.

Code provided above works in FireFox 32, Chrome 37, IE 11.

Like this:

CSS

::selection{
}

https://developer.mozilla/en-US/docs/Web/CSS/::selection

I do not really know if you want to set or get the selection color, since you said both in title & your text.

You can set a background on the ::selection pseudo-element with CSS.

/* firefox */
::-moz-selection { background: lightblue; }
/* safari, chrome, opera, IE9+ */
::selection { background: lightblue; }

The only way I know to set it in JavaScript is to create a CSS rules.

There is no simple way to find the selection color in JavaScript. You have to parse the CSS rules to find which one set it and which one match your current element. If you really want to do it, you can be inspired by the same code for the first-letter pseudo-element: http://jsfiddle/tzi/27q8Z/

Cheers, Thomas.

Here is how to get the selection colors in JavaScript. This method adds a temporary element to the DOM. If you already have a DOM element then you could use that instead.

    function getSelectionColors() {
        var elt = document.createElement("div");
        elt.style.backgroundColor = "Highlight";
        elt.style.color = "HighlightText";
        document.body.appendChild(elt);
        var s = getComputedStyle(elt);
        var ans={
            "color": s.color,
            "backgroundColor": s.backgroundColor
        };
        document.body.removeChild(elt);
        return ans;
    }

If you want a JQuery solution ,If i am guessing right you should use something like this:

http://jsfiddle/utz9t/2/

$('.color').on('click',this,function(){
    var bgcol = $(this).css('backgroundColor');
    $('#txt').css({'color':''+bgcol+''})
});

using mousemove event from jquery and get_random_color function from this question Random color generator in JavaScript

it is easy to applying color to the text. You can attach the event for the entire page if you prefer that.

$( "#text" ).mousemove(function(event) {
  var color = get_random_color
  console.log(color);
  $(this).css("color",color);
});

 function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

The code pen is here: http://codepen.io/anon/pen/qzLAC