Use 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::selection {
background: #fff;
color: #ff0000;
}
![Screenshot of selected text styled with the ::selection pseudo-element in CSS in white with a red background.](png/screen-shot-2022-02-14-at-7.46.42-ama607.png)
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.
::selection { background: yellow; }
There are only three properties that ::selection
will work with:
color
background
(specifically thebackground-color
,background-image
longhand properties)text-shadow
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.
::selection
Fancy 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.
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.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4 | 2* | 9 | 12 | 3.1 |
Mobile / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
123 | 124 | 4.4 | No |
nice article here my blog have a look http://codeforwin.blogspot.in/
Nice for using
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.
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
Sorry. There is no way.
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!
::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
I’m not sure if this will be ever needed, but it’s quite cool.
background: linear-gradient(to right, #EB3349 0%, #F45C43 50%);
doesn’t work for ::selection. is there any way to do that?
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 ?
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 ;-)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.I have read a lot of articles here in this site but most of them had little info about actual problem or very badly written or sometimes useless. But this article is very good. I really liked it. It is very well written and portrayed. I feel like I learned a lot and have scope to learn more.