自定义选中文字背景色

偶然看到一个网站选中文字的背景色不是默认的蓝色，而是红色，勾起了我的兴趣,于是着手查阅了相关资料，发现原来只需要一个css属性。现将我的发现分享给大家：

我们要用到的css属性是selection，它是css3中的属性。

它在w3school中的介绍如下：

定义和用法

::selection 选择器匹配被用户选取的选取是部分。

只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。

我写了一个demo测试了下，效果果然和预期是一样的

<!doctype html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<title>hello</title>
		<style>
		body{
			/*background-color: red;*/
		}
		p::selection{
			background-color: #ff0000;
		}
		</style>
	</head>
	<body>
		<p>hellofcfgfdsgjdkjdoihje</p>
	</body>
</html>

　　

posted @ 2014-06-17 14:16  木吉生  阅读(638)  评论(1)  编辑  收藏  举报