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事件的事件处理程序中，您可以检查是否选择了任何内容，将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>

还可以扩展此变通办法来处理多行文本选择：

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

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

Answer 3

您是否尝试过：

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

Answer 4

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

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

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

您应该尝试！

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

4 个答案: