利用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 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
Apr 30 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制作静态网站的模板框架(三)
2006/10/09 PHP
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
详解js类型判断
2018/05/22 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
Python日期的加减等操作的示例
2017/08/15 Python
详解django中使用定时任务的方法
2018/09/27 Python
Python函数返回不定数量的值方法
2019/01/22 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
Linux的文件类型
2016/07/05 面试题
个人担保书格式范文
2014/05/12 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
2015年纪委工作总结
2015/05/13 职场文书
党员反邪教心得体会
2016/01/15 职场文书
技术入股合作协议书
2016/03/21 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技
MySQL查询日期时间
2022/05/15 MySQL