【前端开发实例】CSS3 改变选中文本背景色 -（四）

最新推荐文章于 2024-05-07 10:54:38 发布

一点编程

最新推荐文章于 2024-05-07 10:54:38 发布

阅读量1.4k

点赞数 2

分类专栏：开发实践前端文章标签： css3 选择器前端选中文本变色

本文链接：https://blog.csdn.net/JasonAPoint/article/details/78317874

版权

开发实践前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Question. 问题

类似于企业展示站、特色商城这样的面向用户的系统，前端的显示效果显得尤为重要，从细节入手，一个好的细节优化，可以让用户用着很舒服，从而认可你的网站和你的产品。

下面是一个网站的一个文章页面，面对一大段页面上的文字，很多用户都会有这样的习惯，顺手去选中觉得写得好的文字段落，但是浏览器默认的选中文字后的效果是白色的字配合深蓝色的底，视觉效果并不是很友好，好在我们可以使用 CSS3 来改变它默认的效果。
这里写图片描述

Solution. 解决

实现图中的效果很简单，使用 CSS3 的 ::selection 选择器。这个选择器是对于用户选中的元素（这里可以简单的理解为文本）设置 CSS 样式，通过这个选择器我们把文字的颜色和背景色重新设置为我们需要的颜色就可以。

以下是一段完整的代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.G5 {
    width: 380px;
}
h4 {
    color: #333;
    font-size: 16px;
    font-weight: normal;
    line-height: 20px;
    margin-bottom: 20px;
}

p {
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
    line-height: 20px;
}
::-moz-selection{
    background: #b3e5ff;
}
::selection {
    background:#b3e5ff;
}

</style>
</head>
<body>
<div class="G5">
    <h4>将香氛与品牌融为一体</h4>
    <p>品牌香氛不仅仅只是在一定的空间内释放宜人的香氛，它是一门艺术。这包括对公司品牌的认同，获取市场信息，有目标地针对人群，用香氛来相称渲染品牌的各个方面。</p>
    <p>在某些环境中，香氛对人们产生的影响远远超出过其他感官的影响，如灯光、声音、奢华的环境 ，因为香氛嗅觉方案可以使您的品牌与客户建立更持久的情感联系。</p>
</div>
</body>
</html>

这里核心的就只有一句：

::-moz-selection{
    background: #b3e5ff;
}
::selection {
    background:#b3e5ff;
}

Other. 其他

只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。

一点编程

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【前端开发实例】CSS3 改变选中文本背景色 -（四）

使用 CSS3 的 ::selection 选择器。这个选择器是对于用户选中的元素（这里可以简单的理解为文本）设置 CSS 样式，通过这个选择器我们把文字的颜色和背景色重新设置为我们需要的颜色就可以。
复制链接

扫一扫