利用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 动画技术
Jul 27 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
详解Vue中watch的高级用法
2018/05/02 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
python中的句柄操作的方法示例
2019/06/20 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
如何真正的了解python装饰器
2020/08/14 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
通信工程专业女生个人求职信
2013/09/21 职场文书
党员年终民主评议的自我评价
2013/11/05 职场文书
社团文化节邀请函
2014/01/10 职场文书
渡河少年教学反思
2014/02/12 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
2014年新教师工作总结
2014/11/08 职场文书
经理聘任证明
2015/03/02 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL