26 Apr 2011 05:32

26 Apr 2011 05:32

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!

tags — image selection

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