使用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）..刪除它們並使用邊距代替。 =）這是一個小提琴演示： 例子

Answer 2

試試這個 ：

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

參見更多資料

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

我遇到了同樣的問題。

如果你真的想要這個，你可以在元素中做一些事情（不是::選擇），你遇到了麻煩：

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>元素。

這是一個有效的小提琴演示

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

我建議下面的代碼，我試過，它工作正常。

以下是實時工作演示的鏈接使用CSS更改文本選擇顏色

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