使用CSS更改文本选择颜色？

Question

我目前正在网站上工作，我想更改文字选择颜色。

我有点工作。这是我的样式表中的代码（部分）：

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

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

它产生了令人满意的结果。但是，在某些情况下，突出显示似乎失去了它的给定颜色（＃FF099），如下图所示：

正如您在上图中所看到的，使用正确的颜色（＃FF099）完全突出显示文本;但是，正文文本和标题之间以及正文文本左侧的区域以默认颜色（蓝色）突出显示。如何将突出显示的部分内容恢复为默认值？

修改：http://i.imgur.com/NmZIf.png

提供更大的图片

一个片段：

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

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

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

Answer 1

之前我已经徘徊在这个问题上了，事实证明：

::selection (or whatever selection you might use)

不适用于断行标记（br）..删除它们并使用边距代替。 =）这是一个小提琴演示：Example

Answer 2

试试这个：

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

参见More Detail

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

Answer 4

我遇到了同样的问题。

如果真的想要这个，你可以在元素中做一些事情（而不是:: selection）你遇到了麻烦：

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

Answer 5

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

更多细节和示例： http://www.snippetsource.net/Snippet/86/change-color-of-selected-text

Answer 6

尝试将<br />替换为<p>元素。

这是一个有效的 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;
}

Answer 7

我建议下面的代码，我试过，它工作正常。

以下是实时演示 Changing the text selection color using CSS

的链接

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