CSS 鼠标选中文字后改变背景色的实现代码


Posted in HTML / CSS onMay 21, 2023

但想了想,难道不是JS的效果,关闭了JS后,果然,火狐下效果已久存在!

在网页中,选中某段文字,默认的显示效果为:

CSS 鼠标选中文字后改变背景色的实现代码

可以看到,选中后文字颜色为白色,背景为蓝色。
现我们想设置,选中后文字为红色,背景为黄色。需要用到CSS伪类 ::selection。
IE9+、Opera、Google、Chrome、Safari都支持 ::selection 选择器。
Firefox 通过其私有属性 :: moz-selection 支持。

设置CSS为:

CSS 鼠标选中文字后改变背景色的实现代码

页面效果为:

CSS 鼠标选中文字后改变背景色的实现代码

扩展:

::selection 可以应用的属性有:color、background、cursor、outline。

那肯定是 css 的效果了。而且貌似 IE 和 google chrome 都不支持。

于是仔细研究了一下,发现了这么句话:

*::-moz-selection {color:#fc5; background-color:#0f581a;}

恩,一看都知道了。

又在 google 中发现了一片文章:改变鼠标选中时文字的颜色

这么写道:

::-moz-selection{background:#93C; color:#FCF;}
::selection {background:#93C; color:#FCF;}

恩,其实就是这么回事了。

这样,就可以在 firefox 和 google chrome 中实现改变鼠标选中时的颜色和背景色了。

IE还是不行。就算是IE8也不行。恩,“永远是蓝底白字” 。

 
HTML / CSS 相关文章推荐
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 #HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 #HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 #HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 #HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 #HTML / CSS
HTML中link标签属性的具体用法
May 07 #HTML / CSS
You might like
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
php重定向的三种方法分享
2012/02/22 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
JavaScript DOM基础
2015/04/13 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python如何实现一个刷网页小程序
2018/11/27 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python3实现猜数字游戏
2020/12/07 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
MIS软件工程师的面试题
2016/04/22 面试题
主持人演讲稿范文
2013/12/28 职场文书
综合内勤岗位职责
2014/04/14 职场文书
美术学专业求职信
2014/07/23 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
PHP命令行与定时任务
2021/04/01 PHP
Python采集壁纸并实现炫轮播
2022/04/30 Python
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS