Bootstrap 5文本选中颜色类：如何通过Bootstrap方式修改选中文本颜色？

问题场景 #

当段落同时使用bg-primary（深色背景）和text-white（白色文本）类时，默认的文本选中效果几乎难以分辨，因为浏览器自带的选中样式和现有背景/文本色对比度太低。

示例代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <p class="bg-primary text-white">
            This is an example paragraph for text selection!
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

解答 #

1. Bootstrap原生类支持情况 #

Bootstrap 5及更早版本没有提供专门控制文本选中样式的内置类，默认的选中样式由浏览器决定，在深色背景+白色文本的组合下确实会出现辨识度问题。

2. 基于Bootstrap体系的自定义实现 #

可以通过以下几种方式，结合Bootstrap的颜色体系来修改选中样式，保持风格统一：

方式一：自定义通用类

创建一个可复用的自定义类，使用Bootstrap的颜色变量设置选中状态的样式：

/* 自定义文本选中样式类 */
.text-selection-custom::selection {
  background-color: var(--bs-warning); /* 用Bootstrap警告色作为选中背景 */
  color: var(--bs-dark); /* 用Bootstrap深色作为选中文本色 */
}
/* 兼容Firefox浏览器 */
.text-selection-custom::-moz-selection {
  background-color: var(--bs-warning);
  color: var(--bs-dark);
}

使用时直接给元素添加这个类：

<p class="bg-primary text-white text-selection-custom">
  This is an example paragraph for text selection!
</p>

方式二：针对特定类组合设置

如果只想让bg-primary+text-white的元素生效，可以直接针对这个类组合写样式：

.bg-primary.text-white::selection {
  background-color: var(--bs-light);
  color: var(--bs-primary);
}
.bg-primary.text-white::-moz-selection {
  background-color: var(--bs-light);
  color: var(--bs-primary);
}

方式三：Sass源码层面自定义（适用于使用Bootstrap源码的项目）

如果你的项目是基于Bootstrap的Sass源码构建的，可以通过修改变量来全局设置：

// 自定义文本选中样式变量
$selection-bg: var(--bs-warning);
$selection-color: var(--bs-dark);

// 全局覆盖选中样式
::selection {
  background-color: $selection-bg;
  color: $selection-color;
}
::-moz-selection {
  background-color: $selection-bg;
  color: $selection-color;
}

修改后重新编译Sass即可生效。

内容的提问来源于stack exchange，提问作者Cemstrian