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实现超酷的黑猫警长首页
Apr 26 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 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常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
浅谈Python NLP入门教程
2017/12/25 Python
用python实现百度翻译的示例代码
2018/03/09 Python
python调用百度语音识别api
2018/08/30 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
yy司仪主持词
2014/03/22 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
工程材料采购方案
2014/05/18 职场文书
企业文化口号
2014/06/12 职场文书
护林防火标语
2014/06/27 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
2014年电教工作总结
2014/12/19 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
JS ES6异步解决方案
2021/04/29 Javascript
redis内存空间效率问题的深入探究
2021/05/17 Redis
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
如何基于python实现单目三维重建详解
2022/06/25 Python