css - 即使文本区域没有焦点也指示选定的文本

Question

在 Firefox 和 Chrome 中，文本字段的文本选择(= 在该字段中选择的文本范围)仅在该字段具有焦点时才会显示。即使字段没有获得焦点，选择也会存在 — 它可以从 JavaScript 查询，并且如果字段以不改变选择的方式重新获得焦点，它会再次可见 — 但是，它对用户不可见。 (请参阅下面的示例代码片段。在 <textarea> 字段中突出显示您想要的任何文本；然后使用 Tab 和 Shift+Tab 将焦点移开和移回。只有当该字段具有焦点时，您的文本才会显示为选中状态。)

有没有办法覆盖这种行为？

一些注意事项:

• 我尝试使用 CSS's ::selection pseudo-element有设置颜色和背景颜色的规则，但这没有帮助；规则仅在该领域具有焦点时才适用。
• 我更愿意只使用 HTML/CSS/JavaScript(无需用户干预)，但如果需要，我愿意使用浏览器设置。
• 我不在乎选择在没有焦点和有焦点的情况下看起来是否相同，只要它在两种情况下都可见即可。
• 我主要需要支持 Firefox，但如果可能的话，我也想支持其他现代浏览器。
• 我不关心选择的长度是否为零(= 当它只是一个光标位置时)。

<textarea rows="2" cols="15">Hello, world!</textarea>

Answer 1

您是否尝试过在 CSS 中使用 firefox 的特定选择元素？看起来该元素仅以这种方式在 Firefox 中实现(修复后的版本 2-61):

::-moz-selection {

}