Getting selection colors in javascript?

Question

I saw this little nice piece about setting selection colors:

Setting Text Selection Colors in JavaScript http://blogs.adobe.com/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?

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, Jan 06 '14 at 13:29
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, May 24 '22 at 08:28

Peter Brand · Answer 1 · 2021-07-05T10:33:37.970

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.org/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.org/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.

Good to know. I still haven't figured out how to do that CSS3-UI think, just can't grok what they mean. Make any sense to you? — Peter Brand, Oct 16 '14 at 19:07
I do not know either. Just waiting silently for the moment. ;-) — Leo, Oct 17 '14 at 01:04

score 3 · Answer 2 · edited Jan 06 '14 at 13:29

3

Like this:

CSS

::selection{
}

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

edited Jan 06 '14 at 13:29

MackieeE

11,751
4
39
56

answered Jan 06 '14 at 13:28

Goombah

2,835
2
12
22

Thanks for the link, but as far as I can see I can only set selection colors that way, or? – Leo Jan 06 '14 at 13:44

score 1 · Accepted Answer · answered Jan 06 '14 at 13:41

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.net/tzi/27q8Z/

Cheers, Thomas.

Sorry if I was unclear, tzi. Yes, I want to get the colors, not set them. (Did I write that wrong in the question?) Hm, thanks for the tip. That could be a way. — Leo, Jan 06 '14 at 13:52

score 1 · Answer 4 · answered May 24 '22 at 08:50

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;
    }

score 0 · Answer 5 · answered Jan 06 '14 at 13:39

0

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

http://jsfiddle.net/utz9t/2/

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

answered Jan 06 '14 at 13:39

Zword

6,605
3
27
52

Thanks Zword, but I think you misunderstod my question. I want to get the colors that are (or will be) used when the user selects text on the screen. – Leo Jan 06 '14 at 13:46

score 0 · Answer 6 · edited May 23 '17 at 12:31

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

Thanks pm. That code could not be used in my case here, but is a nice example for other uses. — Leo, Jan 06 '14 at 13:54

Getting selection colors in javascript?

6 Answers6