::selection

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::-moz-selection,
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 also reports this feature is in W3C Working Draft status.

Desktop

Google ChromeMozilla FirefoxInternet ExplorerOperaApple Safari
42*99.53.1

Mobile / Tablet

iOS SafariAndroidOpera MobileAndroid ChromeAndroid Firefox
No4.4105651*

Comments

  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#

    Hi.

    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
    Kay
    Permalink to comment#

    Hi,

    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,
    Kay

  4. User Avatar
    Amir

    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
    Ivan
    Permalink to comment#

    ::selection is now part of the CSS Pseudo-Elements Level 4 Working Draft. So it does probably work on most places.
    https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#Summary

  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
    sohil
    Permalink to comment#

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

Submit 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.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag