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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 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脚本的10个技巧(1)
2006/10/09 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JS 强制设为首页的代码
2009/01/31 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
中学运动会广播稿
2014/01/19 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
师范生见习报告范文
2014/11/03 职场文书
工作检讨书大全
2015/01/26 职场文书
初中政治教学工作总结
2015/08/13 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
Mysql Show Profile
2021/04/05 MySQL
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL