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中transform变换模型的渲染
May 27 HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 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
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
wxPython中listbox用法实例详解
2015/06/01 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Django 实现下载文件功能的示例
2018/03/06 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
Python如何在bool函数中取值
2020/09/21 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
作风转变心得体会
2014/09/02 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers