前端

选中高亮Selection

你可能会说

用户划选文字时的底色，想换成品牌色。

选中高亮是用户拖选网页文字后，浏览器为选区显示的前景色和背景色可用 ::selection 为文章或说明文字设置选区颜色，并在不同主题下检查对比度。它可以适度使用品牌色，但不能影响文字辨认；user-select: none 只适合拖拽手柄等确实不应被选中的元素，正文和说明通常应允许复制。

默认色

拖选一段文字，中间这段就是选中高亮，底色由浏览器决定。

品牌色

拖选一段文字，中间这段就是选中高亮，和品牌色呼应。

组成结构 · Anatomy

前面这段没选中，这段被拖选，后面也没选中

没被选中的部分，保持原样

鼠标拖选覆盖的那一段范围

::selection 的 background

::selection 的 color，和底色对比要够

常见变体 · Variants

默认Default

选中高亮

没有品牌化需求时保留浏览器默认样式

品牌色Brand

选中高亮

不用新增组件，选中状态就能呼应品牌色

防误选NoSelect

拖拽手柄 · user-select: none

确实不应被选中的拖拽手柄或纯交互装饰

典型使用场景

文章正文选中复制

把提示词写好的三个习惯

写提示词时，先说明目标，再补充必要背景。模型只能依据当前提供的信息响应，因此关键约束也要明确写出。

📋 复制

代码片段选中

1.card {
2  border-radius: 12px;
3  padding: 16px;
4}

按钮拖拽防误选

✕ 拖动时意外选中按钮文字

✓ user-select: none 防误选

品牌官网的文本选中

MUSEON STUDIO

让好想法被世界看见

用 ::selection 统一设置选区配色