CSS改变网页中鼠标选中文字背景颜色例子


Posted in HTML / CSS onApril 23, 2014

一个不是那么众所周知的技术就是我们可以在浏览器里美化被选择的文字的样式。Windows自身提供的是一种很难看的墨绿色的颜色,而苹果电脑上提供的是浅绿色。火狐浏览器,IE9,Opera和谷歌浏览器允许我们自定义被选择文字的颜色。让我来展示给你看:

CSS代码

复制代码
代码如下:

/* webkit, opera, IE9 */
::selection { background:lightblue; }
/* mozilla firefox */
::-moz-selection { background:lightblue; }

-moz-属性前缀是个火狐浏览器用的,而基本的::selection选择器是给谷歌浏览器用的。跟其它CSS选择器的用法一样,你可以嵌套使用,在不同的地方显示不同的颜色:
复制代码
代码如下:

/* webkit, opera, IE9 */
div.highlightBlue::selection { background:lightblue; }
/* mozilla firefox */
div.highlightBlue::-moz-selection { background:lightblue; }</p> <p>/* webkit, opera, IE9 */
div.highlightPink::selection { background:pink; }
/* mozilla firefox */
div.highlightPink::-moz-selection { background:pink; }

用CSS美化被选择的文字只是一种很简单的技巧,但这些都能让你的网站页面更绚丽、更多彩!

HTML / CSS 相关文章推荐
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 #HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 #HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 #HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 #HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 #HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 #HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 #HTML / CSS
You might like
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
python实现文件的分割与合并
2019/08/29 Python
python中Django文件上传方法详解
2020/08/05 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
项目合作协议书范本
2014/04/16 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
Win11开始菜单添加休眠选项
2022/04/19 数码科技