利用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线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 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编实现程动态图像的创建代码
2008/09/28 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php生成短网址示例
2014/05/05 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
2015/01/19 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
php 修改密码实现代码
2017/05/24 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
少女风vue组件库的制作全过程
2019/05/15 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
python飞机大战游戏实例讲解
2020/12/04 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
拉拉队口号
2014/06/16 职场文书
通知的写法
2015/04/23 职场文书
2015小学师德工作总结
2015/07/21 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript