利用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 3D位移translate效果实例介绍
May 03 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
css背景和边框标签实例详解
May 21 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 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+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python中split方法用法分析
2015/04/17 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
python dataframe NaN处理方式
2019/12/26 Python
python实现滑雪游戏
2020/02/22 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
Julep官网:美容产品和指甲油
2017/02/25 全球购物
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
教师绩效工资方案
2014/02/01 职场文书
材料员岗位职责
2014/03/13 职场文书
公司门卫岗位职责
2014/03/15 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
校长师德表现自我评价
2015/03/05 职场文书
污水处理保证书
2015/05/09 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
Java SSM配置文件案例详解
2021/08/30 Java/Android
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android