利用CSS换变文本选中后的颜色

openjq

有时候我们想改变文本选择复制时的颜色，那么我们就可以直接给这个网页中添加一个伪元素::selection然后再改变这个伪元素的 color 和 background就可以了。

::selection的作用：
::selection：选择器匹配元素中被用户选中或处于高亮状态的部分。
::selection的缺点：
::selection：只可以应用于少数的CSS属性：color, background, cursor,和outline。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  ::selection {
    background: #4caf50eb;
        color: #ffffff;
  }

  ::-moz-selection {
    background: #4caf50eb;
        color: #ffffff;
  }

  ::-webkit-selection {
    background: #4caf50eb;
        color: #ffffff;
  }

  .box-shadow {}
</style>

<body>
  <div class="box-shadow"><span style="color: rgb(0, 0, 0); font-family: monospace; font-size: medium; white-space: pre-wrap;">OPEN开发家园-为开发爱好者分享技巧！ </span></div>
</body>

</html>

效果：

选中的文本变为绿色

[Html/CSS] 利用CSS换变文本选中后的颜色

openjq LV9