4

http://jsfiddle.net/uKdPM/

I've set the ::selection color in css, so when you highlight the text on the screen, the color of the text is pink. I'm trying to now override that color through jQuery when the page loads. Seems like it should be super simple. But it's not working for me.

android.nick
  • 11,069
  • 23
  • 77
  • 112
  • It wont happen because jquery cannot find p::selection, you could catch the p itself, but im unsure how to actually apply styling to pseudostuff like that – Jan Dragsbaek Dec 12 '11 at 11:38
  • 1
    Not really related to the question, but I believe `::selection` was removed from the CSS3 spec, so use it with care. – James Allardice Dec 12 '11 at 11:45
  • possible duplicate of [Change text selection highlight with JS](http://stackoverflow.com/questions/3427981/change-text-selection-highlight-with-js) – thirtydot Dec 12 '11 at 11:58

5 Answers5

5

I believe if you want to achieve this kind of effect, you need to apply the color change based on a CSS class. I forked your jsfiddle, and heres the result

Although i think your question is interesting, im having a difficult time figuring where this can be put to practical use. Do you want to change the theme on the fly?

Jan Dragsbaek
  • 8,078
  • 2
  • 26
  • 46
  • My use case: I was considering having a different color accent for each individual "article" on the website i'm building. They would be more like books than articles, much longer, so I was considering the possibility. I'm still not sure if it's something I wanna do. – android.nick Dec 19 '11 at 22:07
  • I would not recommend you to it, honestly i think its a cheesy effect that easily can get quite annoying. – Jan Dragsbaek Dec 19 '11 at 23:50
2

According to this question you can't change the highlight color of a selection, because there isn't a DOM interface for manipulating pseudo classes. What you could do is to change the class of the element.

Community
  • 1
  • 1
kgiannakakis
  • 103,016
  • 27
  • 158
  • 194
1

I had the same problem, and I stumbled upon this question. The solution can be just adding a <style> tag with css properties into the document body.

$('<style> p::selection{ background-color:#000; } p::-moz-selection{ background-color:#000; }</style>').insertAfter('body *:last');

This might not be the most elegant way to do it, but at least it works.

Mike Burnwood
  • 279
  • 1
  • 2
  • 15
0

::selection is a CSS pseudo-class, not a jquery selector !

You can't do this $('p::selection').css({color: "#3c3"}) and expect the text selection color to be changed.

  • $(<selector>) allows you to select dom elements in flexible way, using IDs, css classes, attributes...

  • :hover, :after... ::selection are CSS-pseudo selector which allows you to style elements.

Even though the syntax of a jquery selector can look the same as a pseudo-class css, they are different.

By the way, it is not possible to change programmatically the style of css pseudo-classes (like :hover...).

Didier Ghys
  • 30,396
  • 9
  • 75
  • 81
  • Actually, you CAN do that AND expect the text selection color to be changed... it wont work, but I certainly did it, and expected it... just so you know. – android.nick Dec 19 '11 at 21:39
0

If you can change to using classes instead of directly setting the colour from JavaScript, then do that because it's much simpler.

Otherwise, see this question: Setting CSS pseudo-class rules from JavaScript

Using the library provided in this answer:

jss('p::selection', {
    color: '#3c3'
});

http://jsfiddle.net/thirtydot/uKdPM/9/

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349