CODEWITHSUNDEEP
htmlcss
Bhaxy
Bhaxy

Reputation: 5574

Changing the text selection color using CSS?

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.sstatic.net/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>

Upvotes: 41

Views: 35655

Answers (7)

Barath Kumar
Barath Kumar

Reputation: 439

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;
}

Upvotes: 0

Kamesh Jungi
Kamesh Jungi

Reputation: 6251

/*** 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;
}

Upvotes: 8

Ronen Cypis
Ronen Cypis

Reputation: 21470

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;
}

Upvotes: 0

Christian Moser
Christian Moser

Reputation: 1951

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

Upvotes: 0

Bindiya Patoliya
Bindiya Patoliya

Reputation: 2764

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

Upvotes: 10

Ivan Castellanos
Ivan Castellanos

Reputation: 8243

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 */
}

Upvotes: 0

Daniel
Daniel

Reputation: 244

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

Upvotes: 14

Related Questions