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 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
python开发之for循环操作实例详解
2015/11/12 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
小学英语教学反思
2014/01/30 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
财产公证书
2014/04/10 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
员工生日活动方案
2014/08/24 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
会计工作检讨书
2015/02/19 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS