Changing the text selection color using CSS?

Question

I'm currently working on a website, and I want to change the text selection color.

I have it somewhat working. This is (part of) the code in my stylesheet:

::selection {
  background: #FF0099;
  color: black;
  text-shadow: none;
}

::-moz-selection {
  background: #FF0099;
  color: black;
  text-shadow: none;
}

It produces a mostly satisfying result. However, in some cases, the highlighting seems to lose its given color (of #FF099), as shown in this picture:

picture of website

As you can see in the picture above, the text is entirely highlighted using the correct color (#FF099); however, the area between the body text and the title, as well as to the left of the body text, is highlighted with the default color (of blue). How can I keep parts of the highlighting from going back to the default?

edit: larger picture available at https://i.stack.imgur.com/BmSiq.png

a snippet:

::selection {
    background: #FF0099;
    color: black;
    text-shadow: none;
}

::-moz-selection {
    background: #FF0099;
    color: #EEE;
    text-shadow: none;
}

<p>sample</p>
<br />
<p>sample2</p>

@MrLister I disagree, in my opinion, it shows the problem. Here's a screenshot of what I see when I highlight the output: http://i.imgur.com/UHOyN.png (you can clearly see the blue space between the two pink areas of the highlighted area). — Bhaxy, May 14 '12 at 06:29
I did that too and I am sure @MrLister also did the same, We cannot duplicate the issue on our system. — Starx, May 14 '12 at 06:34
@Starx I have been using Google Chrome. I've tried three other browsers. In IE I found that it failed to highlight the line break whatsoever (http://i.imgur.com/s1Na8.png). In Firefox I found a similar result to IE (http://i.imgur.com/BLDWB.png). In Safari I found that the line break was highlighted blue (http://i.imgur.com/dnL7Z.png). That's four browsers now: the error seems to occur on Safari and Chrome, but not Internet Explorer and Firefox (at least on my system). If it helps at all, I'm running Windows 7. — Bhaxy, May 14 '12 at 06:39
@Bhaxy Sorry, I didn't try hard enough with Chrome. Didn't realise that the blue was your default Chrome selection background color, since it's different on mine. Doing more checking now. — Mr Lister, May 14 '12 at 07:13
It looks as though that `::selection` bg colour is not applied to elements without content. — Anriëtte Myburgh, May 14 '12 at 07:13
@MrLister Both Chrome and Safari use WebKit. Is it possible that the problem is with WebKit itself? Or is there something I can do CSS-wise? — Bhaxy, May 14 '12 at 07:16
@Bhaxy I don't know if you can call it a problem. They just differ from other browsers in how they display things. Even if they would render this background in the colour you specified, it would still look different from how Mozilla displays it. As as to what you can do CSS-wise, I'm still checking. — Mr Lister, May 14 '12 at 07:24
Stuff like this is precisely why they dropped `::selection` from the spec :) — BoltClock, May 14 '12 at 08:24
There's another issue with webkit. ::selection does not apply to fully-selected paragraphs that have a :first-letter selector on them. see here: http://jsfiddle.net/6JqGb/1/ Select multiple paragraphs, and you'll see what I mean. Works fine in Mozilla, however ~ — Terra Ashley, Jul 07 '14 at 00:02
Also, text selection styling doesn't get applied to list items in webkit browsers: http://jsfiddle.net/Mottie/VUuFR/73/ — Mottie, Aug 09 '14 at 14:44

Daniel · Answer 1 · 2012-05-14T07:31:17.867

12

I have wandered upon this problem before and it turns out:

::selection (or whatever selection you might use)

does not work on an break line tag (br).. remove them and use margins instead. =) Here is an fiddle to demonstrate: Example

edited May 14 '12 at 07:31

answered May 14 '12 at 07:26

Daniel

224
2
10

Neat. My first reaction was: naah, it can't be that simple. But apparently it is! +1. Can you make it work the same in Firefox? – Mr Lister May 14 '12 at 09:21
Aa, you mean that it does not mark the area between the text? I don't know if there's anything to make it work. =/ – Daniel May 14 '12 at 10:09

score 9 · Answer 2 · answered Jan 01 '14 at 09:06

9

Try This :

<style>
*::selection {
  background: #cc0000;
  color: #ffffff;
}
*::-moz-selection {
  background: #cc0000;
  color: #ffffff;
}
*::-webkit-selection {
  background: #cc0000;
  color: #ffffff;
}
</style>

See for More Detail

answered Jan 01 '14 at 09:06

Bindiya Patoliya

2,726
1
16
15

score 7 · Answer 3 · answered Oct 01 '15 at 10:40

/*** Works on common browsers ***/
::selection {
    background-color: #352e7e;
    color: #fff;
}

/*** Mozilla based browsers ***/
::-moz-selection {
    background-color: #352e7e;
    color: #fff;
}

/***For Other Browsers ***/
::-o-selection {
    background-color: #352e7e;
    color: #fff;
}

::-ms-selection {
    background-color: #352e7e;
    color: #fff;
}

/*** For Webkit ***/
::-webkit-selection {
    background-color: #352e7e;
    color: #fff;
}

score 0 · Answer 4 · answered Mar 06 '13 at 09:15

0

I was having the same issue.

If you really want this there are some things you can do in the elements (not ::selection) you are having trouble with:

div {
    position: relative; /*Use it as much as you can*/
    height: 100px; /* or max-height instead of margin or br */
    line-height: normal; /* keep line-height normal*/
    -webkit-transform: translate(0px,0px); /* This hack can work */
    -moz-transform: translate(0px,0px); /* hack moz */
    transform: translate(0px,0px); /* hack prefixless */
}

answered Mar 06 '13 at 09:15

Ivan Castellanos

8,041
1
47
42

Where this is related to the question? – Bruno Monteiro Jun 01 '16 at 16:46
...this was a fix for the issue mentioned in the question, the blue part thingy doesn't happen whit this fix, at least 3 years ago that was the case. Thanks for the negative vote btw. – Ivan Castellanos Jun 03 '16 at 07:08

score 0 · Answer 5 · answered Jul 06 '14 at 14:14

You can use the ::selection CSS selector. This matches all the text that is selected by the user. Even though it is not part of the CSS3 specification, it is supported in IE9+, Opera, Google Chrome and Safari. Firefox supports the prefixed ::-moz-selection.

More details and examples: http://www.snippetsource.net/Snippet/86/change-color-of-selected-text

score 0 · Answer 6 · answered Jul 06 '14 at 14:45

Try to replace your <br /> with margin to the <p> elements.

Here is a working Fiddle Demo

HTML

<p>sample</p>
<p>sample2</p>

CSS

p {margin-bottom:50px;}
::selection {
    background: #FF0099;
    color: black;
    text-shadow: none;
}
::-moz-selection {
    background: #FF0099;
    color: #EEE;
    text-shadow: none;
}

score 0 · Answer 7 · edited May 31 '21 at 20:40

0

I would suggest the below code, I have tried, it's working fine.

::selection
{
    background: #FF0099;
    color: black;
    text-shadow: none;
}
::-moz-selection
{
    background: #FF0099;
    color: #EEE;
    text-shadow: none;
}
p
{
    margin-bottom: 50px;
}

edited May 31 '21 at 20:40

Jean-François Fabre

137,073
23
153
219

answered May 05 '15 at 13:05

Barath Kumar

439
3
7

Changing the text selection color using CSS?

7 Answers7

Linked

Related