*真的*在选择时更改文本颜色答案

【问题标题】：*Really* change text color on select*真的*在选择时更改文本颜色
【发布时间】：2015-09-09 22:41:58
【问题描述】：

我们有一个经常被复制到用户电子邮件工具的链接，包括颜色和背景颜色。由于有 Whitelabel 解决方案，因此当文本为白色时，这可能会导致问题。

文字为白色
用户选择要复制的文本
文本再次变为白色（在最坏的情况下，背景颜色丢失）

我知道 ::selection 伪类，但它对复制过程没有帮助。看到这个小提琴：https://jsfiddle.net/vvfL2516/

.background { background: #222; }

.link { color: #fff; }
.link::-moz-selection {
    background: #f00;
    color: #0f0;
}
.link::selection {
    background: #f00;
    color: #0f0;
}

Thunderbird 显示一个蓝色链接（=nice），但它在 Libre Office 和 Google Docs 中不可见，...（不好）

2015 年 9 月 24 日更新：

Andrew Lyndem 的链接表单包含答案：https://stackoverflow.com/a/7454048/461754

【问题讨论】：

可能是这样的：stackoverflow.com/questions/7439210/…
使用 :active 或 :focus
jsfiddle.net/RachGal/vvfL2516/1
我刚才在 WordPress 所见即所得编辑器上复制粘贴了您的版本，效果很好。虽然不知道它在电子邮件工具上的外观。
@AndrewLyndem 可以根据口味调整颜色！！ :)

标签： html css copy selection

【解决方案1】：

如果你真的想改变它，不仅要使用 active 和 focus 属性，还要使用 a:hover 以便当你将鼠标悬停在它上面时它会突出显示

.background {
  background: #222;
}
.link {
  color: #fff;
}
.link::-moz-selection {
  background: #f00;
  color: #0f0;
}
.link::selection {
  background: #f00;
  color: #0f0;
}
a:focus,
a:hover,
a:active {
  background: red;
  color: green;
}

<div class="background">
  <a class="link" href="https://app.tomvote.com/result/3a13bac6a6f93fa4fff0036bb1e8b7b5">Show Vote Results</a>
</div>

【讨论】：

你可以很明显地调整颜色，我用明亮的来强调效果:)
但这是否适用于 Libre Office 和 Google Docs 等电子邮件工具？ +1
从未使用过 Libre Office。不过它可以在 Google Docs 上运行
我在 Google Docs 和 Libre Office 上试过这个，但它对我不起作用:(我使用的是 Ubuntu 14.04 和 Chrome。