html - 在 Bootstrap 3 中用鼠标选择(突出显示)的文本样式

Question

我正在尝试使用 Bootstrap 3 template并更改突出显示文本的外观。

默认情况下，当您用鼠标选择一个单词时，它是蓝色白色背景的。我只想将蓝色更改为红色，但是当我使用以下 css 时，它会覆盖整个样式:

::-moz-selection { /* Code for Firefox */
    color: rgba(217,83,79,0.50);
 }

 ::selection {
    color: rgba(217,83,79,0.50);
 }

这是一个例子:

我搜索了 bootstrap 和模板的 CSS 文件，但找不到任何样式。我正在寻找::selection。我怎样才能找到它？

Answer 1

您应该指定所选文本的颜色和背景。

Warning: Browser implementation of ::selection is not standardized and the spec for css 4 is not yet approved. That said, according to caniuse ::selection, browser support looks pretty good.

下面是在多个浏览器中运行的代码示例。请注意，FF 和 IE 默认情况下会根据背景颜色进行主题选择，以使它们更加引人注目，而 chrome 则不会。 Chrome 还会阻止任何真正的白色选择背景与深色主题背景的对比。

这是堆栈片段中的演示

.dark  { color: #fff; background-color: #333;}
.light { color: #333; background-color: #fff;}

::-moz-selection { color: #D9534F;  background: #fff; }
::selection      { color: #D9534F;  background: #fff; } 

<div class="dark" >Dark-Themed </div>
<div class="light">Light-Themed</div>

Here's a Demo in jsFiddle

有关更多信息，请阅读 MDN on the ::selection psuedo-element或点击this article on CSS-Tricks