[原创作品]html css改变浏览器选择文字的背景和颜色

时间:2022-02-21 19:18:10

  又很久没有'剥壳'了,最近在为一家公司做一个生产管理解决方案。所以都很忙。今天的话题很简单,就做一个很简单的网页特效。今天偶然浏览到一个网站,他们在选择文字时,样子不是蓝背景和白色字体那么单调,感觉这样很好。至少,显得和别人的不一样。

  其实他用的就是css3的一个伪对象选择符,::selection。这个就可以改变选择文字的样式了。献上demo。这其实没多少技术含量,只是将点点滴滴和大家一起分享。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<style>
/* webkit, opera, IE9 */
div::selection {
background: red;
color: #fff;
} /* mozilla firefox */
div::-moz-selection {
background: red;
color: #fff;
} /* webkit, opera, IE9 */
div::selection {
background: pink;
color: #fff;
} /* mozilla firefox */
div::-moz-selection {
background: red;
color: #fff;
} </style>
<body>
<div>
hi, Every body, I am Steven. Nice to meet you.<br>
Welcome to my blog!
</div> </body>
</html>

大家试一试吧!转载请注明出处:http://zhutty.cnblogs.com