CSS 修改文字选中后的颜色

在页面中修改文字被选中后的颜色可以用 ::selection 选择器,它不仅能够修改选中内容的颜色,还可以修改其背景色、光标状态等。

可以和 ::selection 选择器一起使用的 CSS 属性只有一部分:

  • color
  • background-color
  • text-shadow

下面来看一下代码示例:

<div class="box">默认选中颜色</div>
<div class="box">通过 ::selection 修改颜色</div>
<div class="box selector">通过 .selector::selection 修改颜色</div>
/* 可以添加浏览器前缀实现兼容写法 */
::-moz-selection {
color: #fff;
background-color: #000;
}

::-webkit-selection {
color: #fff;
background-color: #000;
}

::selection {
color: #fff;
background-color: #000;
}

/* 也可以对具体的 HTML 元素添加 ::selection 选择器 */
.selector::selection {
color: #36f;
background-color: #f80;
}

相关文档:
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
https://caniuse.com/#feat=css-selection