时间戳

首页 > 解决方案 > Angular中具有特定名称的复选框的CSS样式

css - Angular中具有特定名称的复选框的CSS样式

问题描述

如果我在 Angular 模板中有三个复选框，如下所示：

  <mat-checkbox fxFlexFill formControlName="first">  First  </mat-checkbox>
  <mat-checkbox fxFlexFill formControlName="second"> Second </mat-checkbox>
  <mat-checkbox fxFlexFill formControlName="third">  Third  </mat-checkbox>

在第一个之前添加空间的正确方法是什么，而不必更改模板？

即我知道我可以在第一个类中添加一个类，但感觉在语义上是错误的（也许我当然错了，但我觉得我应该能够仅使用 css 来做到这一点），所以我想知道它是否是可以做一些类似于输入的事情，即：

// css
mat-checkbox[name="first"] {
  margin-top: 10px;
}

标签： cssangular

解决方案

在您的 css 中，更改name="first"为formControlName="first"在您的 html 中没有名为name的属性，而是formControlName。

mat-checkbox[formControlName="first"] {
  margin-top: 10px;
  background-color: red;
}
<mat-checkbox fxFlexFill formControlName="first"> First </mat-checkbox>
<mat-checkbox fxFlexFill formControlName="second"> Second </mat-checkbox>
<mat-checkbox fxFlexFill formControlName="third"> Third </mat-checkbox>

推荐阅读