Using your cursor select this sentence. Notice how as you select the text a background color fills the space? You can change the background color and color of selected text by styling ::selection. Styling this pseudo element is great for matching user-selected text to your sites color scheme.

p::-moz-selection { color: red}
p::selection { color: red; }

Take note that the double colon is necessary in the syntax for this pseudo element, despite that other pseudo elements accept a single colon.

As seen above, you can style ::selection on individual elements. You can also style the entire page by dropping the bare pseudo element in your stylesheet.

::-moz-selection { background: yellow; }
::selection { background: yellow; }

There are only three properties that ::selection will work with:

  • color
  • background (background-color, background-image)
  • text-shadow

See the Pen ::selection tests by Chris Coyier (@chriscoyier) on CodePen.

If you try to style ::selection with a property that’s not on the list, then that property will be ignored. It may be tricky seeing background in that list because the property will only render a color when used on ::selection and it won't render a background image or gradient.

Also don't try this:

p::selection { color: red; }

When browsers find a part of a select they don't understand, they drop the entire thing, so this will fail all the time.

One of the most helpful uses for ::selection is turning off a text-shadow during selection. A text-shadow can clash with the selection's background color and make the text difficult to read. Set text-shadow: none; to make text clear and easy to read during selection.

See the Pen ::selection text-shadow by Chris Coyier (@chriscoyier) on CodePen.

At your own risk

Be advised that ::selection has been removed from the spec. It may not work reliably for all users.

Fancy ::selection

Paired with Sass, or any other preprocessor, you can make really cool effects with ::selection. Select the text in the demo below:

You might notice the effect is not so smooth in some browsers. Let's file that demo under: things that are possible, but probably just for fun.

Another dumb-but-fun little trick is revealing an image through selected text.

Additional Resources

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.



Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox


  1. User Avatar
    Pankaj Prakash

    nice article here my blog have a look http://codeforwin.blogspot.in/

  2. User Avatar
    Diego Crusius
    Permalink to comment#


    I am having trouble with anchors. I want all my selected areas to be red so I add a simple ::selection{ background-color: red } and everything works fine, but when I add links to my document there is always a line bellow the tag that still gets the default color.

    I see no reason to post code here since it happens everywhere. Thanks.

  3. User Avatar
    Permalink to comment#


    I know it says that this isn’t going to work for IOS, but is there a way to get a workaround for IOS? I’ve got things working for all other browsers, but we also need this for IOS.

    With kind regards,

  4. User Avatar

    Hi, I have a problem with this page in mozilla Firefox Developer Edition 39.0a2 (2015-04-22), when i scroll up to header an div with absolute position and black background color show on top, and i can not see other elements of page.

    But when scoll down to “What’s your take on managing styles entirely in JavaScript?” div this will remove!

  5. User Avatar
    Permalink to comment#

    ::selection is now part of the CSS Pseudo-Elements Level 4 Working Draft. So it does probably work on most places.

  6. User Avatar
    Oscar Tini
    Permalink to comment#

    I’m not sure if this will be ever needed, but it’s quite cool.

  7. User Avatar
    Permalink to comment#

    background: linear-gradient(to right, #EB3349 0%, #F45C43 50%);
    doesn’t work for ::selection. is there any way to do that?

  8. User Avatar
    Romain Petit
    Permalink to comment#

    Webkit specific question.
    Did you notice that ::selection{ background-color: white } does not create a perfectly white background ? Instead, it shows a grey background (#989898)

    It seems like the perfect white color (#fff) is forbidden. My guess is that it’s to make sure that the selection is visible enough : most pages having a white background, a selection background set to the same color would not contrast at all.

    I asked this on Stack Overflow and it didn’t raise much interest so far http://stackoverflow.com/questions/32820767/css-text-selection-styling-can-not-make-background-white

    Do you have any idea ? Do you experience the same in Webkit browsers ?

    • User Avatar
      Permalink to comment#

      It’s a Chrome and Safari thing. Make the color just slightly transparent, like this rgba(255,255,255,0.99) and it (almost) appears as white. And it works with every color, not just white ;-)

  9. User Avatar

    Does anyone have maybe an idea how to reset ::selection attributes back to browser defaults? I have a problem when used vuematerial, that sets some custom colors.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.