自定义网页选中内容背景颜色

一般网页中选中文字和相关内容显示的是蓝背景,白文字:

css伪元素selection用法

如果需要变成这种样式,就需要使用css伪元素::selection

css伪元素selection用法

css伪元素::selection用法

以下代码放在当前网页应用的css文件中

改变整个页面的文本选中的样式

::selection {  /*IE9+、Opera、Google Chrome 以及 Safari 中有效*/
 background-color:#37AA88;  /*选中文本背景颜色*/
 color:#000;  /*选中文本文字颜色*/
 }

::-moz-selection {  /*Firefox浏览器有效*/
 background-color:#37AA88;
 color:#000;
 }

设置页面指定内容块(class为content)的内容文字选中后的样式状态

.content::selection {
 background-color:#37AA88;
 color:#000;
 }

.content::-moz-selection {
 background-color:#37AA88;
 color:#000;
 }

选中文本失去焦点的样式

::selection:window-inactive{
 background-color:#B9B9B9;
 color:#fff;
}

::-moz-selection:window-inactive{
 background-color:#B9B9B9;
 color:#fff;
}