如何在kendo-grid組件中自定義復選框？

Question

在kendo-grid組件中自定義復選框。

<ng-template kendoGridCellTemplate let-data *ngIf="col.checkbox" let-i="i">
            <input type="checkbox" id="chkbox_{{i}}" [checked]="data.Discontinued" [disabled]="col.checkboxDisabled" class="thf-grid thf-grid-checkbox" />
            <label for="chkbox_{{i}}"></label>
 </ng-template>

布局顯示成功，但是id的值錯誤，我正在編寫類似“ chkbox_”的代碼。

Answer 1

您可以將選擇器添加到輸入中，然后通過使用pseudoselector ::after使其自定義。 或僅使用[type="checkbox"]:checked/:not(:checked)選擇器將其自定義。 另外，您也不應忘記特異性， 以了解更多信息 。

這是我之前提到的兩個選項的組合：

[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  border: 2px solid #ccc;
  background: #fff;
}

來自自定義復選框的代碼筆示例 。

如果特定的選擇器不起作用，您也可以隨時使用!important