menu

秋梦无痕

一场秋雨无梦痕,春夜清风冻煞人。冬来冷水寒似铁,夏至京北蟑满城。

Avatar

CSS设置选中网页文字时的背景和颜色

Q: 如何设置选中网页文字时的文字背景和文字颜色?
A: 使用CSS伪类 ::selection。
IE9+、Opera、Google、Chrome、Safari都支持 ::selection 选择器。
Firefox 通过其私有属性 ::-moz-selection 支持。
这里设为黄底黑字,默认是蓝底白字。
<style>
#demo::-moz-selection{color:#000 !important;background:#fd0 !important}
#demo::selection{color:#000 !important;background:#fd0 !important}
</style>

如果要在自己浏览器中设置此项,windows的Edge和所有系统的Chrome,都可以通过安装本地扩展做到:
//file: custom.css
*::selection{color:#000 !important;background:#fd0 !important}

//file: manifest.json
{
"content_scripts":
[ {
"css": ["custom.css"],
"matches": [ "http://*/*","https://*/*"]
} ],
"description": "Force to change all background of selection text to yellow(original blue)",
"name": "Custom CSS",
"version": "1.0",
"manifest_version": 2
}

把这两个文件放在新建好的Custom CSS文件夹。

在Edge中打开edge://extensions/,点击“加载解压缩的扩展”,选中Custom CSS文件夹即可。

在Chrome中打开chrome://extensions/,点击“加载已解压的扩展程序”,选择Custom CSS文件夹即可。

But why? 🤔

As a geek, there is nothing why, only how. LOL