CSS styling for checkbox with specific name in Angular

Question

If I have three checkboxes in Angular template, like this:

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

What would be the correct approach for adding space before the first one, without having to change the template?

I.e. I know I can add a class to the first one, but it feels semantically wrong (perhaps I am wrong of course, but I have a feeling I should be able to do this solely with css), so I was wondering if it was possible to do something similar to inputs, i.e.:

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

Debsmita Paul · Accepted Answer · 2021-04-09 08:00:59Z

3

In your css, change name="first" to formControlName="first" as in your html there is no attribute called name but 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>

answered Apr 9, 2021 at 8:00

Debsmita Paul

1,48011 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS styling for checkbox with specific name in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related