更改 Firefox 中的非活动选择颜色

Question

当我在 Firefox 中选择一些文本，然后窗口或 Iframe 失去焦点（例如选择地址栏），然后选择变为灰色，即使在 css 中指定了不同的颜色。

如何在 Firefox 中更改禁用选择的颜色？

我尝试过的：

<style>::selection { background-color: green; }</style>
<p>lorem ipsum</p>

编辑：

我想在这里使用的似乎是::inactive-selection，但它还没有在firefox中实现。见https://drafts.csswg.org/css-pseudo-4/#selectordef-inactive-selection

相关错误：https://bugzilla.mozilla.org/show_bug.cgi?id=706209

有人知道解决方法吗？在这一点上，我正在考虑使用一些 javascript hacks。任何想法如何做到这一点？

Answer 1

不，你不能

至少在 Firefox 上没有。

我回答 否 的原因是为了节省您和其他可能试图找到一些解决方案/技巧的人的时间。

既然您已经了解 css 规范。我可能想补充一点，

请记住，Firefox 有自己的 ::selection、::-moz-selection 版本。它还有自己的:window-inactive、:-moz-window-inactive 版本。不幸的是，将这些东西一起使用是行不通的。

来源：CSS Tricks

/* Does work */
::-moz-selection {
  background: rgba(255,0,0,0.9);
  color: white;
}
/* Doesn't work */
::-moz-selection:-moz-window-inactive {
  background: rgba(255,0,0,0.3);
}
/* Nor this */
:-moz-window-inactive::-moz-selection {
  background: rgba(255,0,0,0.3);
}

另外，Bugzilla 有多年前的错误要求此功能，并说它无法处理非活动选择，但没有对此作出回应。这是list。他们中的一些人甚至已经 11 岁了。我计划与某人讨论此问题并自己报告一个新错误并提供更多详细信息，可能会在此处添加他们的响应或错误编号，以便您获得更新。

所以，现在我认为你不应该寻找一些技巧，这只会浪费你的时间。

谢谢

更新：这里是 bug 来关注 bugzilla，让我们看看开发团队怎么说。

Answer 2

对于单个节点/元素内的文本选择，可以使用 javascript 实现可能的解决方法。

• 您可以监听窗口的focus 和blur 事件。
• 在blur-event 的事件处理程序中，您可以检查是否选择了任何内容，将span-元素包裹在所选文本周围并清除选择。
• 在focus-事件的事件处理程序中，您可以将内容和选择恢复到之前的状态。

演示：

let range = null;
let span = null;

// browser-window looses focus (blur)
window.addEventListener('blur', function(event){
  let selection = window.getSelection();
  // abort if selection involves text from multiple nodes
  if (selection.anchorNode != selection.focusNode) {
    console.log('Selection over multiple nodes is not supported!');
    return;
  }
  // get range from current selection and wrap content in span with custom style
  range = selection.getRangeAt(0);
  span = document.createElement("span");
  span.classList.add("selection-custom-highlight");
  span.appendChild(range.extractContents());
  range.insertNode(span);
  // clear current selection in document
  selection.removeAllRanges();
});

// browser-window gets focus
window.addEventListener('focus', function(event){
  if (span) {
    let selection = window.getSelection();
    // replace span with text-node
    let node = document.createTextNode(span.textContent)
    span.remove();
    range.insertNode(node);
    span = null;
    // clear current selection in document
    selection.removeAllRanges();
    // add saved range to selection
    selection.addRange(range);
  }
});

::selection,
.selection-custom-highlight {
  background-color: green;
}

<div id="content-1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<hr>
<div id="content-2">
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

还可以扩展此解决方法以处理多行的文本选择：

• 为此，您必须使用 anchorOffset 和 focusOffset 的值将跨度环绕 anchorNode 和 focusNode 中的选择。
• 您还必须找到anchorNode 和focusNode (See this answer) 之间的所有文本节点。并将每个内容包装在 span-node 中。
• 当窗口重新获得焦点时，您必须撤消所有修改。

注意： 这可能会导致对文档进行大量操作，并且在使用与这些节点交互或附加到这些节点的任何 javascript 库时可能会导致一些不良行为。

Answer 3

你试过了吗：

::-moz-selection {
  background-color: green;
}

Answer 4

如果浏览器不支持某个功能，则不能使用该功能。

我知道这不是最佳答案，但您应该尝试使用其他浏览器。 其实我用Brave！他拥有谷歌浏览器的所有功能，因为它基于Chromium。它更快、阻止广告和跟踪器（您可以禁用）、进行 HTTPS 升级、更快地加载网站等等。

Brave 是 GitHub 上的一个开源项目：https://github.com/brave

你应该试试！