是否可以设置 Mat-Checkbox 样式以显示 X 而不是复选标记？答案

【问题标题】：Is it possible to style Mat-Checkbox to show an X instead of checkmark?是否可以设置 Mat-Checkbox 样式以显示 X 而不是复选标记？
【发布时间】：2021-09-15 08:21:15
【问题描述】：

尝试使用 Angular Material <mat-checkbox> 实现功能，如果用户单击 Yes 按钮，它会显示一个复选标记。如果用户点击No按钮，它会显示一个X。我觉得Angular Material官方指南对此有点模糊。

我尝试在 mat-checkbox-background 类中添加新的 'X' svg 作为内容，但仅适用于封装。我也无法添加全局，因为我在其他组件中也使用了<mat-checkbox>。我只希望它应用于一个组件。

 .mat-checkbox-background{
     content: url(/assets/icons/cancel_checkbox.svg) !important;
  }

请给点建议谢谢！

注意：不要使用封装，因为它会影响其他样式。

【问题讨论】：

你试过这个类 .mat-checkbox .mat-checkbox-background {} 吗？
是angularJs还是Angular 2？
@SarathMohandas 是的，它没有用。
@NavnathJadhav 它是 Angular 12

标签： html angular angular-material

【解决方案1】：

如果我做对了，您想在未选中时显示“X”。在这种情况下，下面的 CSS 会有所帮助：

mat-checkbox.cross {
  .mat-checkbox-background {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23ff4081'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'/%3E%3C/svg%3E");
    background-position: center;
    background-size: contain;
  }
}

你需要使用<mat-checkbox>的类：

<mat-checkbox class="cross">...</mat-checkbox>

我还创建了一个堆栈闪电战：https://stackblitz.com/edit/angular-gyykpy?file=src/styles.scss

【讨论】：

非常感谢您的回答，但它仅适用于全局 css，它将适用于整个项目。我只想在一个组件视图上使用它。
你可以简单地通过一个类来处理它。更新了答案。只需使用class="cross" 在任何你想交叉的地方。
谢谢这正是我所做的，我创建了简单的类并且它有效。