利用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 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
PHP如何使用Memcached
2016/04/05 PHP
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
python创建临时文件夹的方法
2015/07/06 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
python多进程并行代码实例
2019/09/30 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
Java语言程序设计测试题选择题部分
2014/04/03 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
医学生实习自我鉴定
2013/09/27 职场文书
中学教师管理制度
2014/01/14 职场文书
运动会入场口号
2014/06/07 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
产品质量保证书范本
2015/02/27 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis