使用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:

它产生了一个令人满意的结果。然而，在某些情况下，高亮显示似乎失去了给定的颜色(#FF099)，如图所示:

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?

正如您在上面的图片中看到的，文本完全用正确的颜色突出显示(#FF099);然而，正文和标题之间的区域，以及正文文本的左边，都用默认颜色(蓝色)突出显示。如何避免部分高亮显示回到默认值?

edit: larger picture available at http://i.imgur.com/NmZIf.png

编辑:大图片可在http://i.imgur.com/NmZIf.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>

7 个解决方案

#1

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

对换行标记(br)不起作用。删除它们，使用边距。例:this is a fiddle to demonstrate: Example

#2

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

看到更多的细节

#3

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

#4

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

#5

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.

您可以使用::选择CSS选择器。这将匹配用户选择的所有文本。尽管它不是CSS3规范的一部分，但在IE9+、Opera、谷歌Chrome和Safari中都支持它。Firefox支持前缀:- mozilla -selection。

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

更多细节和示例:http://www.snippetsource.net/snippet/86 /change- colorof -selected-text

#6

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

尝试将
替换为

元素。

Here is a working Fiddle Demo

这是一个工作的小提琴演示。

HTML

HTML

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

CSS

CSS

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

#7

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

我建议下面的代码，我已经试过了，它运行得很好。

Here is a link with live working Demo Changing the text selection color using CSS

这里有一个链接与实时演示更改文本选择颜色使用CSS

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