时间戳

首页 > 解决方案 > 当检查图标在输入（复选框）上正确时，它不会触发更改事件。我怎样才能解决这个问题？

css - 当检查图标在输入（复选框）上正确时，它不会触发更改事件。我怎样才能解决这个问题？

问题描述

HTML是这部分

 <div class="words">
    <ng-container  *ngFor="let word of words; let i = index">
      <div class="word" [ngClass]="{'checked': checkbox.checked}">
        <label for="word">{{ word }}
          <input [id]="i" #checkbox type="checkbox" name="word" (change)="isChecked($event)"/>
        </label>
      </div>
    </ng-container>
  </div>

在css文件中我有这种风格

.words {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(2, 250px);

  div {
    width: 154px;
    height: 58px;
    border: 1.5px solid #7f33c9;
    border-radius: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    input {
      -webkit-appearance: none;
      background: #efefef;
      border-radius: 48px;
      display: inline-block;
      width: 36px;
      height: 36px;
      border: none;
      position: relative;
      top: 10px;
      &:checked {
       -webkit-appearance: none;
        background-color: green;
      }
    }
  }
}
.checked {
  background-color: #732cb9;
  label {
    color: white;
    &::after {
      font-family: "Material Icons";
      content: "done";
      font-size: 35px;
      position: relative;
      top: 15px;
      right: 37px;
      width: 0px;
      height: 0px;
    }
  }
}

当图标在复选框之外时，它会触发事件，但是当我将它定位为在复选框中时，它会影响它并且事件不会触发我该如何解决这个问题？

标签： cssangular

解决方案

推荐阅读