利用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 选择器 伪类选择器介绍
Jan 21 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 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
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总
2013/07/08 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
python中requests小技巧
2017/05/10 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
html5 input属性使用示例
2013/06/28 HTML / CSS
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
毕业生简单求职信
2013/11/19 职场文书
生产助理岗位职责
2014/06/18 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书