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

【问题标题】：Changing the text selection color using CSS?使用 CSS 更改文本选择颜色？
【发布时间】：2012-05-14 05:55:39
【问题描述】：

我目前正在开发一个网站，我想更改文本选择颜色。

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

::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 提供更大的图片

一个sn-p：

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

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

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

【问题讨论】：

蓝色看起来是一个 HTML 元素。
@MrLister 我不同意，在我看来，它说明了问题。这是我在突出显示输出时看到的屏幕截图：i.imgur.com/UHOyN.png（您可以清楚地看到突出显示区域的两个粉红色区域之间的蓝色空间）。
@Bhaxy，你是怎么得到图片中的蓝色的？
@Starx 我只是突出显示了文本，单击并拖动样式。
这样的东西正是他们从规范中删除::selection的原因:)

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

试试这个：

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

查看More Detail

【讨论】：

【解决方案3】：

我之前曾在这个问题上徘徊过，结果是：

::selection (or whatever selection you might use)

在换行标记 (br) 上不起作用。删除它们并改用边距。 =) 这里有一个小提琴来演示：Example

【讨论】：

整洁。我的第一反应是：不，不可能这么简单。但显然是这样！ +1。你能让它在 Firefox 中同样工作吗？
啊，你的意思是它没有标记文本之间的区域？我不知道是否有什么可以让它发挥作用。 =/

【解决方案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 */
}

【讨论】：

这和问题有什么关系？
...这是对问题中提到的问题的修复，蓝色部分不会在此修复中发生，至少 3 年前是这种情况。感谢您的反对票。

【解决方案5】：

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案7】：

我会建议下面的代码，我已经尝试过了，它工作正常。

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

【讨论】：