CSS SNIPPET

  返回

文本选中效果自定义  视觉效果

修改被选中文本的样式。

HTML
<p class="custom-text-selection">Select some of this text.</p>
CSS
::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}
效果演示

Select some of this text.

代码说明
  • ::selection 定义了元素的伪选择符,用来格式化元素内被选中的文本。 注意你不需要与其他选择符组合使用,因为你定义的样式将在文档层面应用。
浏览器支持

90.1%

⚠️ 完整支持需要浏览器前缀,目前还没有标准化规范。