在网页开发中，当页面失去焦点时，浏览器通常会改变文本选区的颜色（通常是变灰），以表示页面当前不处于活动状态。这种行为是浏览器的默认行为，但有时你可能希望保持文本选区的颜色不变，即使页面失去焦点。
要解决这个问题，你可以使用JavaScript和CSS来覆盖浏览器的默认行为。具体来说，你可以通过监听页面的blur和focus事件，并在页面失去焦点时动态改变文本选区的样式。
以下是一个示例代码，展示了如何实现这一点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>保持文本选区颜色</title>
<style>
/* 定义文本选区的样式 */
::selection {
background-color: #b3d4fc; /* 选中的背景颜色 */
color: #000; /* 选中的文字颜色 */
}
</style>
</head>
<body>
<p>这是一段文本，你可以选中它来测试效果。</p>
<script>
// 监听页面失去焦点事件
window.addEventListener('blur', function() {
// 当页面失去焦点时，强制重新应用文本选区样式
document.styleSheets[0].cssRules[0].style.backgroundColor = '#b3d4fc';
});
// 监听页面获得焦点事件
window.addEventListener('focus', function() {
// 当页面获得焦点时，恢复文本选区样式
document.styleSheets[0].cssRules[0].style.backgroundColor = '#b3d4fc';
});
</script>
</body>
</html>
CSS部分：
::selection伪元素来定义文本选区的样式。在这个例子中，选区的背景颜色设置为#b3d4fc，文字颜色设置为#000。JavaScript部分：
window对象的blur事件，当页面失去焦点时，强制重新应用文本选区的背景颜色。window对象的focus事件，当页面重新获得焦点时，同样重新应用文本选区的背景颜色。通过这种方式，你可以在页面失去焦点时保持文本选区的颜色不变，从而提升用户体验。