利用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样式linear-gradient的使用实例
Jan 16 HTML / CSS
CSS3教程(1):什么是CSS3
Apr 02 HTML / CSS
css3 border-image使用说明
Jun 23 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 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 miniBB中文乱码问题解决方法
2008/11/25 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
php常用图片处理类
2016/03/16 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
js计算页面刷新的次数
2009/07/20 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
python3调用windows dos命令的例子
2019/08/14 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
python属于解释语言吗
2020/06/11 Python
python获取整个网页源码的方法
2020/08/03 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
平民服装店创业计划书
2014/01/17 职场文书
迟到检讨书300字
2014/02/14 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
市场营销计划书
2015/01/17 职场文书
家长学校教学计划
2015/01/19 职场文书
未婚证明范本
2015/06/15 职场文书
《角的度量》教学反思
2016/02/18 职场文书