35

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

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

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

4

7 回答 7

12

我以前曾在这个问题上徘徊过，结果证明：

::selection (or whatever selection you might use)

不适用于断行标签 (br).. 删除它们并改用边距。=）这是一个演示的小提琴：示例

于 2012-05-14T07:26:12.643 回答
9

尝试这个 ：

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

查看更多详情

于 2014-01-01T09:06:28.333 回答
7 
/*** 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;
}
于 2015-10-01T10:40:09.893 回答
0

尝试用元素<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;
}
于 2014-07-06T14:45:21.480 回答
0

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

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

于 2014-07-06T14:14:32.237 回答
0

我遇到了同样的问题。

如果你真的想要这个，你可以在元素中做一些事情（不是::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 */
}
于 2013-03-06T09:15:00.733 回答
0

我建议使用以下代码，我已经尝试过了，它工作正常。

::selection
{
    background: #FF0099;
    color: black;
    text-shadow: none;
}
::-moz-selection
{
    background: #FF0099;
    color: #EEE;
    text-shadow: none;
}
p
{
    margin-bottom: 50px;
}
于 2015-05-05T13:05:21.753 回答