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

Changing the text selection color using CSS?

提问by Bhaxy

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>

回答by Daniel

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)。删除它们并使用边距代替。=) 这是一个演示的小提琴：示例

回答by Bindiya Patoliya

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

查看更多详情

回答by Kamesh Jungi

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

回答by Ivan Castellanos

I was having the same issue.

我遇到了同样的问题。

If you reallywant this there are some things you can do in the elements (not ::selection) you are having trouble with:

如果你真的想要这个，你可以在元素（而不是 ::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 */
}

回答by Christian Moser

You can use the ::selectionCSS 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.

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

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

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

回答by Ronen Cypis

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

尝试<br />用边距替换<p>元素。

Here is a working Fiddle Demo

这是一个工作 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;
}

回答by Bharath Kumaar

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

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

Here is a link with live working DemoChanging 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;
}