Changing text selection colour
Changing text selection colour
How to change the colour of text selections with CSS
This one's pretty simple - changing the colour of text selections to suit your theme.
/* Webkit */ ::selection { background-color: rgba(255,111,111,0.9); color: #000; } /* Mozilla */ ::-moz-selection { background-color: rgba(255,111,111,0.9); color: #000; }
As above, it will change the text selection all across your site. For a more specific use, you can remove the selection background from images when they are dragged (which seems to occur by default in Firefox).
img::selection {background-color: transparent;} img::-moz-selection {background-color: transparent;}
Try dragging the two images below (Safari/Chrome only; Firefox has this behaviour automatically):
Enjoy the article? Tweet it!
Discussion - 4 comments
Anonymoustsangk 26 Apr 2011 06:28
Awesome! I love it :D
Edit
Anonymousleiger 26 Apr 2011 07:46
Can't see any difference whatsoever between the two images, but I can definitely notice the background colour when selecting text.
It looks great! Thanks!
Edit
Anonymousleiger 27 Apr 2011 06:41
Hmm, I see a pink background on the left image now - which I don't think I saw earlier when posting the other comment. IIRC there might have been a light grey one instead, on Chrome/Windows.
Edit
averyAnonymousAnonymous 08 May 2012 02:46
like it….
Edit
Add a new comment