J'essaie d'afficher les cartes car le type d'entrée est une case à cocher, en sélectionnant les cartes, je suis capable de récupérer les détails des cartes sélectionnées par l'utilisateur, et mon exigence est que je dois mettre en évidence la carte qui est sélectionnée par l'utilisateur.
par exemple, je dois mettre en évidence la carte dont la case est cochée, et si la case n'est pas cochée, je dois l'afficher comme carte.
<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>lable+input[type=checkbox]:checked {
//some css code
}mais ci-dessus CSS ne fonctionne pas, quelqu'un pourrait-il aider à ce sujet
3 Réponses :
Une fois l'entrée vérifiée, l'entrée suivante div.card doit appliquer le css.
Votre css devrait être comme ça
input[type=checkbox]:checked + div.card{
color: red;
}
Démo https://stackblitz.com/edit/angular-checked-input?file=src/app/app.component.css
<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>.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%;
}Merci pour votre contribution. Pouvez-vous s'il vous plaît modifier votre réponse et expliquer comment elle résout la question initiale et améliore ou complète les réponses existantes.