如何自定義kendo網格組件中的複選框？

Question

要自行在劍道網組件的複選框。

<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)選擇器使其自定義。 此外，你不應該忘記的特異性read this to know more。

這裏有兩個選項的組合，之前我所提及般：

[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; 
} 

從code pen example of custom checkboxes。

而且如果連具體的選擇不工作，你可以隨時使用!important