css改变选中字体背景色和字体色

自定义文本选中样式
最新推荐文章于 2024-07-05 17:26:19 发布
原创 最新推荐文章于 2024-07-05 17:26:19 发布 · 712 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用CSS伪元素::selection和::-moz-selection来改变网页中文本被选中时的背景色及字体颜色，适用于Webkit、Opera、IE9+及Firefox等浏览器。

默认情况下，选择网站文本都是深蓝的背景，白色的字体,那么我们如何在浏览器中选中文本后的背景色与前景色呢？
答案就是：使用这个“::selection”

/*Webkit,Opera9.5+,Ie9+*/ ::selection { background: 颜色值； color:颜色值； } /*Mozilla Firefox*/ ::-moz-selection { background: 颜色值； color:颜色值； }

如图：改成背景为红色

  

 

 

 

CSS - 鼠标选中文字后改变背景色与文字颜色（鼠标选中文本时的颜色）
🏆 前端领域优质创作者
09-15 8122
CSS - VUE.js nuxt.js uni-app 鼠标选中文字后改变背景色与文字颜色HTMLCSS鼠标鼠标选中的更改颜色css 鼠标选中文本时的颜色CSS改变网页中鼠标选中文字背景颜色例子使用css3 ::selection改变选中文本的颜色CSS改变网页中鼠标选中文字背景颜色HTML
【前端开发实例】CSS3 改变选中文本背景色 -（四）
JasonAPoint的博客
10-23 1566
使用 CSS3 的 ::selection 选择器。这个选择器是对于用户选中的元素（这里可以简单的理解为文本）设置 CSS 样式，通过这个选择器我们把文字的颜色和背景色重新设置为我们需要的颜色就可以。
css给文字设置背景色
u010234868的专栏
05-17 1533
【代码】css给文字设置背景色。
CSS设置元素字体颜色与背景
banyiji3580的博客
07-30 519
CSS的颜色与背景属性用于设置前景色、背景色和背景图片。 常见的颜色与背景属性： color： 十六进制、rgb（）函数或CSS承认的颜色名； 用于设定元素的前景色 background-color： ...
css设置选中文字和选中图片字的颜色
qq_68155756的博客
03-14 872
要改变页面中选中文字的颜色，可以使用 CSS 的 ::selection 伪元素来实现
css改变选中文字的颜色和背景颜色
weixin_42834575的博客
02-27 803
直接上css，做个记录： 效果：
设计实用教程 | 使用 Theme 统一颜色和字体风格
Flutter 社区
07-26 1727
通过定义Theme，我们可以更好地复用颜色和字体样式，从而让整个 app 的设计看起来更一致。全局 Theme 会在整个 app 范围内生效，而局部 Theme 只作用...
CSS改变网页中鼠标选中文字背景颜色例子
09-25
标题中提到的“CSS改变网页中鼠标选中文字背景颜色例子”，指出了CSS不仅可以用来改变网页的结构层次和内容的外观，还可以用来增强网页的交互性和视觉吸引力。通过CSS，我们可以改变用户选中（即用鼠标高亮）网页...
CSS改变选择网页文字背景色
12-11
为了使网页设计更加个性化和专业，我们可以使用CSS（层叠样式表）来定制选中文本的背景色和颜色。 首先，让我们深入了解一下CSS中的`::selection`伪元素。`::selection` 是一个伪元素选择器，用于设置页面中被用户...
CSS中selection中如何设置选中的背景色带透明
m0_54829066的博客
01-07 1604
伪类来设置选中文本的样式。要设置选中的背景色带透明，可以使用。在这个示例中，当你选中文本内容时，背景颜色会变成半透明的黑色。颜色函数来指定一个带透明度的黑色背景。伪类只能应用于文本内容，不能应用于其他元素。在 CSS 中，可以使用。表示背景颜色是半透明的。
CSS学习（1） - 选择器与背景颜色
ylh的博客
04-15 727
CSS学习总结，普通选择器的常见的几种类型，CSS的颜色属性和不同的背景操作等。
CSS3 -- 文字颜色自适应背景颜色
qq_51248309的博客
03-30 1351
使用CSS让文字颜色自适应背景颜色
纯 CSS 实现文字智能适配背景效果
最新发布
Conan9912345的博客
07-05 4031
动态的文字有长有短，但是需要智能适配背景的颜色变成其对比色。
css：改变用户选中文字的颜色和背景颜色
weixin_40968646的博客
02-21 1110
【代码】css：改变用户选中文字的颜色和背景颜色。
css：selection自定义用户选中部分背景颜色样式
彭世瑜的博客
06-22 1252
实现效果当用户选中页面中的文字，修改默认的文字颜色和背景色 演示代码
css点击文字（非按钮) 能自动改变颜色。
qq_44267691的博客
11-25 1万+
css点击文字（非按钮) 能自动改变颜色。
前端基础(五)_CSS文本文字属性、背景颜色属性
见贤思齐焉，见不贤内自省
12-14 1801
CSS文本文字属性、背景颜色属性
CSS：改变用户选中文字的颜色和背景颜色
热门推荐
好好做前端
07-26 1万+
这是大多数浏览器默认的文字选中样式： 如果你是想让它符合整个网站的风格，就可以选择自定义选中的背景颜色和字体颜色。用户选中文字时的自定义颜色：p::selection { background:#ccc; color:#ff645d; } p::-moz-selection { background:#ccc; color:#ff645d; } p::-webkit
CSS技巧：自定义选中文本的背景和字体颜色
CSS提供了伪元素和伪类选择器来改变文本选中的背景色和字体颜色。这一功能对于提升用户体验和页面的视觉效果十分重要。下面将详细介绍如何使用CSS来改变文本选中的背景色和字体颜色。 ### CSS伪元素和伪类选择器 #...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值