Highlight the label item after clicking on checkbox - html

Question

I am trying to display the cards as input type is a checkbox, on selecting the cards I am able to fetch the details what are cards selected by the user, and my requirement is I required to highlight the card which is selected by the user.
for example, I need to highlight the card whose checkbox is checked, and if the checkbox is unchecked I need to show as the card.
lable+input[type=checkbox]:checked {
//some css code
}
<form [fromGropu]="form1">
<label for="{{i}}" *ngFor="let item of items" ;let i=index ">
<input type="checkbox " id="{{i}} " [value]="item " (change)="onchange() "/>
<div class="card rounded-0 ">
<div class="card-header ">{{item.header}}</div>
<diva class="card-body>{{item.desc}}</div>
<div class="card-footer">{{item.footer}}</div>
</div>
</div>
</label
</form>
but above CSS is not working, could anyone help on this

Answer 1

After input checked, the div.card following input should apply the css.
Your css should be like this
input[type=checkbox]:checked + div.card{
color: red;
}
Demo https://stackblitz.com/edit/angular-checked-input?file=src/app/app.component.css

Answer 2

Why not just highlight using a class which is toggled using ngClass? please try this change.
<form>
<label for="{{i}}" *ngFor="let item of items;let i =index" (click)="item.active = !item.active;"
[ngClass]="item.active ? 'active' : ''" style="display:block;">
<div class="card rounded-0">
<div class="card-header">{{item.header}}</div>
<div class="card-body">{{item.desc}}</div>
<div class="card-footer">{{item.footer}}</div>
</div>
</label>
</form>
Note: please delete this active property for the array used if you are sending the data to any API. Below is a working example!
Stack Blitz Demo

Answer 3

.services input[type="checkbox"] {
display: none;
}
.services label {
height: 100%;
padding: 10px;
margin: 0px;
border-radius: 0.55rem;
}
.services input[type="checkbox"]:checked + label {
background: #20df80;
}
.services input[type="checkbox"]:checked + label::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
border: 2px solid #1dc973;
content: "\f00c";
font-size: 24px;
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
background: white;
}
.services img{
max-width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container mt-5'>
<div class="row services">
<div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
<div class="card shadow-soft text-center" style="width: 100%;">
<input class="" type="checkbox" id="24 Horas" name="type[]" value="5" checked>
<label for="24 Horas">
<br>
<h5 class="card-title"><strong>24 Horas</strong></h5>
<img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
</label>
</div>
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
<div class="card shadow-soft text-center" style="width: 100%;">
<input class="" type="checkbox" id="Aire acondicionado" name="type[]" value="4">
<label for="Aire acondicionado">
<br>
<h5 class="card-title"><strong>Aire acondicionado</strong></h5>
<img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
</label>
</div>
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
<div class="card shadow-soft text-center" style="width: 100%;">
<input class="" type="checkbox" id="Bar" name="type[]" value="8">
<label for="Bar">
<br>
<h5 class="card-title"><strong>Bar</strong></h5>
<img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
</label>
</div>
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
<div class="card shadow-soft text-center" style="width: 100%;">
<input class="" type="checkbox" id="Buffet" name="type[]" value="3" checked>
<label for="Buffet">
<br>
<h5 class="card-title"><strong>Buffet</strong></h5>
<img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
</label>
</div>
</div>
</div>
</div>