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 24 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
前端H5 Video常见使用场景简介
Aug 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
php strtotime 函数UNIX时间戳
2009/01/14 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
javascript时间函数大全
2014/06/30 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
Vue组件化开发思考
2018/02/02 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
Django REST 异常处理详解
2020/07/15 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书