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的值是错误的，我正在写这样的代码＆＃34; chkbox _＆＃34;。

Answer 1

您可以为输入添加选择器，然后使用伪选择器 ::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

如何在kendo-grid组件中自定义复选框？

1 个答案: