Change text selection highlight with JS

Question

For standard browsers you can use something like this to change the coloring of selected text:

div.txtArea::selection {
 background: transparent;
}

div.txtArea::-moz-selection {
 background: transparent;
}

div.txtArea::-webkit-selection {
 background: transparent;
}

But I need to do this with JavaScript instead.

My users can select text and then change the color. While they are selecting another color it updates the color constantly. Since the text is selected they can't see what the color looks like. I need to change the selection style of my targeted element to be transparent only during mouseover of the color changer.

I have tried a few things including:

$('div.txtArea').css({
    'selection': 'transparent',
    '-moz-selection': 'transparent',
    '-webkit-selection': 'transparent'
});

Is there a way to do this with javascript?

Heliometer

Answer 1

There's no DOM interface for manipulating pseudo-classes. The only thing you can do is add the rules to a stylesheet. For instance:

// Get the first stylesheet 
var ss = document.styleSheets[0]

// Use insertRule() for standards, addRule() for IE
if ("insertRule" in ss) {
    ss.insertRule('div.txtArea::-moz-selection { background: transparent; }', 0);    
    ss.insertRule('div.txtArea::selection { background: transparent; }', 0);    
    ss.insertRule('div.txtArea::-webkit-selection { background: transparent; }', 0);    
}

You can access and change rules using stylesheet.cssRules[index].style, stylesheet.rules[index].style for IE, which is where it gets a little more complicated.

I didn't include an IE6-8 example using addRule() because those versions of IE don't support ::selection.

Ralph

Thanks, that is what I will do. I have written a cross browser solution for manipulating stylesheets. I was hoping to not have to use it (just to keep an inline approach). – Heliometer