我在 div
中使用了具有以下样式的单选按钮(通过单击 div
来选择它):
.plans-list {
display: flex;
justify-content: center;
margin: 2rem 0;
.plan {
display: flex;
margin: 0 0.5rem;
position: relative;
&:hover {
::ng-deep .card {
cursor: pointer;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
}
&__type {
display: block;
width: 100%;
height: 100%;
visibility: hidden;
position: absolute;
z-index: 2;
}
}
}
<div class="plans-list">
<div class="plan" *ngFor="let plan of planTypes">
<input (click)="calculateTotal()" class="plan__type" type="radio" name="planType" [value]="plan.value"
formControlName="planType" #planType>
<app-plan-item [type]="plan.title" [active]="planType.checked" [params]="planParameters">
</app-plan-item>
</div>
</div>
单击单选按钮不起作用,active
类不会分配给 app-plan-item
元素!怎么了?
演示:https://stackblitz.com/edit/angular-ahw2bf?file=src%2Fapp%2Fapp.component.css
最佳答案
将 CSS 可见性更改为不透明度 https://stackblitz.com/edit/angular-5v457f
.plan__type {
display: block;
width: 100%;
height: 100%;
opacity:0;
position: absolute;
z-index: 2;
}
关于javascript - 单击隐藏的单选按钮在 Angular 9 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61359939/