CODEWITHSUNDEEP
htmlcssangular
MadMax
MadMax

Reputation: 306

Styling the image inside the checkbox without class name

Screenshot

<div class="panel panel-line panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">Meb Katmanları</h3>
        <div class="panel-actions">
            <mat-slide-toggle color="warn" [(ngModel)]="allMebLayers" (change)="mebToggle()"></mat-slide-toggle>
        </div>
    </div>
    <div *ngIf="allMebLayers" class="panel-body" style="max-height: 70vh; overflow-y: auto">



        <mat-selection-list *ngFor="let l of legends" style="overflow-y: hidden; overflow-x: hidden;">

            <mat-checkbox>
                    <td class="p-5">{{l.layerName}}</td>

                    <td class="p-5"><img [src]="l.legend.imageData"></td>
            </mat-checkbox>
        </mat-selection-list>


    </div>
</div>

I want to just style the image inside the checkbox. Any simple way without adding new class name ?

Upvotes: 1

Views: 262

Answers (2)

Juli&#225;n
Juli&#225;n

Reputation: 328

To style the image inside the checkbox WITHOUT a new class name, try this selector in your css document:

mat-checkbox img {
  /* desired CSS properties */
}

Upvotes: 2

Joe
Joe

Reputation: 1110

To accomplish the styling, you could also use:

.p-5 img { ... }

If you want to only target that image for that class and not all of the mat-checkbox img elements that could also be on the same page.

Upvotes: 1

Related Questions