利用CSS3的特性改变文本选中时的颜色


Posted in HTML / CSS onSeptember 11, 2013

今天打开TechCrunch的中文网站,选中文字时选区颜色变成了绿色,跟网站整体的绿色风格非常协调。于是对实现细节感兴趣,一探究竟。

实现很简单,利用CSS3的特性。

复制代码
代码如下:

::selection{
background-color:#84ca7f;color:#000;
}
::-webkit-selection{
background-color:#84ca7f;color:#000;
}
::-moz-selection{
background-color:#84ca7f;color:#000;
}

同样可以使用CSS选择器指定部分元素设置选区颜色,例如.maroon::selection。IE系列,我只有IE9,也支持该特性。

我觉得修改选区默认颜色要谨慎,除非能够像TechCrunch那样达到整体风格统一。否则可能令用户不习惯。

HTML / CSS 相关文章推荐
CSS3 圆角效果
Jul 15 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
css3进行截取替代js的substring
Sep 02 #HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 #HTML / CSS
css3学习心得分享
Aug 19 #HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 #HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 #HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 #HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 #HTML / CSS
You might like
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
php强制下载类型的实现代码
2011/04/21 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
javascript 一些用法小结
2009/09/11 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
python多进程共享变量
2016/04/06 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
Python调用JavaScript代码的方法
2020/10/27 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
大学校运会广播稿
2014/02/03 职场文书
电大本科自我鉴定
2014/02/05 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
金秋助学感谢信
2015/01/21 职场文书
护士个人年度总结范文
2015/02/13 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
node快速搭建后台的实现步骤
2022/02/18 NodeJs