如何修改Angular Material的mat-checkbox，使其未选中状态显示+符号

我来分享两种可行的方案，帮你把Angular Material的mat-checkbox未选中状态改成显示+符号：

方法一：通过CSS伪元素实现（推荐，无需修改组件源码） #

这种方法不需要改动Angular Material的组件源码，仅通过自定义CSS就能实现需求，非常适合项目内的样式定制。

核心思路是：给未选中状态的.mat-checkbox-background添加一个伪元素，设置内容为"+"，然后在选中/不确定状态下隐藏这个伪元素。

/* 未选中状态的checkbox显示+号 */
.mat-checkbox:not(.mat-checkbox-checked):not(.mat-checkbox-indeterminate) .mat-checkbox-background::before {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: white; /* 可根据你的主题调整颜色 */
  font-size: 16px;
  font-weight: bold;
}

/* 选中和不确定状态下隐藏+号 */
.mat-checkbox-checked .mat-checkbox-background::before,
.mat-checkbox-indeterminate .mat-checkbox-background::before {
  display: none;
}

方法二：修改Mat-Checkbox组件模板（需修改组件源码） #

如果你有权限修改Angular Material的组件源码，可以直接在checkbox.html模板中添加+号元素，再配合CSS控制显示逻辑。

修改后的模板代码： #

<div class="mat-checkbox-background">
  <!-- 新增未选中状态的+号元素 -->
  <span class="mat-checkbox-plus-sign">+</span>
  <svg version="1.1" focusable="false" class="mat-checkbox-checkmark" viewBox="0 0 24 24" xml:space="preserve">
    <path class="mat-checkbox-checkmark-path" fill="none" stroke="white" d="M4.1,12.7 9,17.6 20.3,6.3"/>
  </svg>
  <!-- Element for rendering the indeterminate state checkbox. -->
  <div class="mat-checkbox-mixedmark"></div>
</div>

配套的CSS样式： #

/* 默认隐藏+号元素 */
.mat-checkbox-plus-sign {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: bold;
}

/* 未选中状态下显示+号 */
.mat-checkbox:not(.mat-checkbox-checked):not(.mat-checkbox-indeterminate) .mat-checkbox-plus-sign {
  display: flex;
}

/* 选中/不确定状态下隐藏+号 */
.mat-checkbox-checked .mat-checkbox-plus-sign,
.mat-checkbox-indeterminate .mat-checkbox-plus-sign {
  display: none;
}

两种方案对比： #

• 方法一：无需修改组件源码，侵入性低，适合绝大多数项目场景，样式调整灵活。
• 方法二：需要修改Angular Material的源码，仅适合你fork了组件库做深度定制的场景，不推荐常规项目使用。

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