CodeAE 发表于 2023-2-24 14:52:20

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

有时候我们想改变文本选择复制时的颜色,那么我们就可以直接给这个网页中添加一个伪元素::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;">CodeAE代码之家-为开发爱好者分享技巧! </span></div>
</body>

</html>效果:

选中的文本变为绿色

https://www.jianshu.com/p/697b6a02e65d
页: [1]
查看完整版本: 利用CSS换变文本选中后的颜色