自定义网页中被选中文本的样式 CSS selection

最新推荐文章于 2024-08-08 18:52:32 发布

锦天

最新推荐文章于 2024-08-08 18:52:32 发布

阅读量1.1k

点赞数

文章标签：浏览器 CSS selection 选择器网页

本文链接： https://blog.csdn.net/wuyujin1997/article/details/128212042

版权

前端框架同时被 2 个专栏收录

78 篇文章 3 订阅

订阅专栏

软件工具

52 篇文章 1 订阅

订阅专栏

文章目录

两张图

对于选中的文本(准确地说应该是被选中的DOM元素)，浏览器的默认样式：淡青色的背景色。
2. 自定义样式：我改成了豆沙绿的背景色+红色的字体。

自定义被选中文本的样式

如果是你自己的项目，可以使用如下CSS：

::selection {
  background-color: rgba(199, 237, 206);
  color: red;
}

如果是一些在线的网站，你总不能修改人家的代码吧？
是不能。
但是你可以修改已经发到客户端(也就是你自己的电脑)上的网页的代码(这个操作不影响服务端，只对你自己有效！)。
按F12打开 devtools 在 Element 中找到 <head> 中的任意一个 <style> 标签，添加一段你需要的CSS即可：
::selection { background-color: rgba(199, 237, 206); color: red; }

`::selection` 选择器的可填属性

在 ::selection 选择器下可以写哪些CSS属性？不是所有。
官网上说有以下几种：

`::selection` 选择器支持的CSS属性完整版 demo

::selection {
  color: red;
  background-color: rgba(199, 237, 206);
  text-decoration: green wavy underline;
  // text-shadow: 1px 1px 2px grey;
}

缩写成一行：
::selection { color: red; background-color: rgba(199, 237, 206); text-decoration: green wavy underline; }

浏览器兼容

NOTE：移动端口的Safari浏览器不支持 ::selection 选择器。

官网文档

MDN 文档比较全 https://developer.mozilla.org/en-US/docs/web/css/::selection
w3schools 几乎啥都没有
https://www.w3schools.com/cssref/sel_selection.php

锦天

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

自定义网页中被选中文本的样式 CSS selection

文章目录