Question

是否有可能更改已选中复选框的默认颜色（mat-pseudo-checkbox-checked）：

<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

我试过了：

.mat-pseudo-checkbox-checked {
    background-color: #00f;
}

但没有影响。

Answer 1

我不确定但您可以尝试使用此

snapshot.data

到

.mat-select-content, .mat-select-panel-done-animating {
     background: mat-color($background, card); 
}

有关详细信息，您还可以查看以下链接 https://github.com/angular/material2/blob/master/src/lib/list/_list-theme.scss

Answer 2

.mat-pseudo-checkbox{
background-color: red;
}

这对我有用，只需将background-color属性应用于checkbox类，删除已检查的类

Answer 3

只需在class="mat-primary"内添加<mat-list-option>

<mat-selection-list>
            <mat-list-option class="mat-primary" checkboxPosition="before" *ngFor="let shoe of typesOfShoes">
              {{shoe}}
            </mat-list-option>

输出：

Answer 4

使用Material v 7.3.6进行登录，类似于Sathwik，我成功完成了

.mat-pseudo-checkbox-checked {
    background: #FF0;
}

最后添加-checked可确保仅在选中该复选框时才将其着色，否则该复选框始终是该颜色（可能是您的目标？）。请注意，我必须在最高级别的styles.css文件中包含此样式，而不是在单个组件样式文件中包含该样式，才能成功工作。

如果您有多个选择列表，则可以将样式应用于带有类的所需列表。此外，您还可以使用动态生成的类将不同的颜色应用于选择列表中的每个复选框选项！此处的示例：https://stackblitz.com/edit/angular-dtfd6x?file=app/list-selection-example.ts

您会看到第一个选择列表具有基本样式，而第二个列表（包装在unique-selection-list类中）具有不同的样式，每个选项具有唯一的颜色（通过对每个选项应用唯一的类生成） *ngFor循环。

// HTML file
<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

<p>
  Options selected: {{shoes.selectedOptions.selected.length}}
</p>

<br>
<hr>

<mat-selection-list #colors>
  <div class="unique-selection-list">
    <div *ngFor="let color of colorsList" [class]="color.className">
      <mat-list-option
        [value]="color.displayName">
        {{ color.displayName }}
      </mat-list-option>
    </div>
  </div>
</mat-selection-list>

// component.ts file constants
  typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
  colorsList = [
    {
      hexCode: '#00F',
      displayName: 'Blue',
      className: 'blue-checkbox',
    },
    {
      hexCode: '#F0F',
      displayName: 'Fuchsia',
      className: 'fuchsia-checkbox',
    },
    {
      hexCode: '#0F0',
      displayName: 'Green',
      className: 'green-checkbox',
    },
  ];
}

// styles.css
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

.unique-selection-list .blue-checkbox .mat-pseudo-checkbox-checked {
  background: #00F !important;
}

.unique-selection-list .fuchsia-checkbox .mat-pseudo-checkbox-checked {
  background: #F0F !important;
}

.unique-selection-list .green-checkbox .mat-pseudo-checkbox-checked {
  background: #0F0 !important;
}

Answer 5

SRC / STYLES.SCSS

.mat-list-option {
  .mat-list-item-content {
    padding: 2px !important;
    .mat-list-text {
      padding: 2px !important;
    }
    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
      background-color: darkorange;
    }
  }
}

如果您还有其他群组，可以执行此操作

HTML

<mat-selection-list ...>
    <mat-list-option formfiltros-operaciones ...>
        {{operacion.nombre}}
    </mat-list-option>
</mat-selection-list>

<mat-selection-list ...>
    <mat-list-option formfiltros-inmuebles ...> 
        {{inmueble.nombre}}
    </mat-list-option>
</mat-selection-list>

<mat-selection-list ...>
    <mat-list-option formfiltros-localidades ...> 
        {{localidad.nombre}}
    </mat-list-option>
</mat-selection-list>

SRC / STYLES.SCSS

修复填充

.mat-list-option {
  .mat-list-item-content {
    padding: 2px !important;
      .mat-list-text {
      padding: 2px !important;
    }
  }
}

将伪检查颜色应用于“ formfiltros-operaciones”组

.mat-list-option[formfiltros-operaciones] {
  .mat-list-item-content {
    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
      background-color: darkorange;
    }
  }
}

在“ formfiltros-inmuebles”组中应用颜色进行伪检查

.mat-list-option[formfiltros-inmuebles] {
  .mat-list-item-content {
    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
      background-color: green;
    }
  }
}

在“ formfiltros-localidades”组中应用颜色进行伪检查

.mat-list-option[formfiltros-localidades] {
  .mat-list-item-content {
    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
      background-color: blue;
    }
  }
}

it looks like this

角度材质 - 更改单击的mat-list-option的颜色

5 个答案: