立即登录 马上注册
首页 › 开发帮助文档 › 开发技术 › 利用CSS换变文本选中后的颜色

1赞

评论

收藏

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

开发技术 开发技术 发布于：2023-02-24 14:52 | 阅读数：202 | 评论：0

有时候我们想改变文本选择复制时的颜色，那么我们就可以直接给这个网页中添加一个伪元素::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>
效果：
QQ截图20230224144632.jpg
选中的文本变为绿色

关注下面的标签，发现更多相似文章
免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群QQ好友和群 QQ空间QQ空间

举报

返回列表
相关帖子
avatar
112251 经验
193 文档
OPNE在线字典
  • 手机版| 免责声明|
2021-2024  版权所有：CodeAE代码之家   
粤ICP备2023096576号-2